Vue Bootstrap - How to open sidebar when Vue good table row is click?

I am using Vue Bootstrap as well as the Vue good table. Here is the good table code:

<vue-good-table
    class="p-1"
    style="background-color: #fff"
    :columns="columns"
    :rows="rows"
    :rtl="direction"
    :search-options="{
        enabled: true,
        externalQuery: searchTerm,
    }"
    :select-options="{
        enabled: false,
        selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
        selectionInfoClass: 'custom-class',
        selectionText: 'rows selected',
        clearSelectionText: 'clear',
        disableSelectInfo: true, // disable the select info panel on top
        selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
    }"
    :pagination-options="{
        enabled: false,
        perPage: pageLength,
    }"
    theme="my-theme"
    @on-row-click="onRowClick"
    v-b-toggle.sidebar-right lazy backdrop
>
    <template slot="table-row" slot-scope="props">
        <!-- {{ props }} -->
        <span
            v-if="props.column.field === 'fullName'"
            class="text-nowrap"
        >
            <b-avatar :src="props.row.avatar" class="mx-1" />
            <span>{{ props.row.fullName }}</span>
        </span>
        <span
            v-if="props.column.field === 'image_link'"
            class="text-nowrap"
        >
            <!-- {{ props.row.image_link.length }} -->
            <span v-if="props.row.image_link.constructor === Array">
                <b-avatar :src="props.row.image_link[0]" class="mx-1" />
            </span>
            <span v-else>
                <b-avatar :src="props.row.image_link" class="mx-1" />
            </span>
        </span>
        <span v-else>
            {{ props.formattedRow[props.column.field] }}
        </span>
    </template>

    <!-- pagination -->
    <template slot="pagination-bottom" slot-scope="props">
        <div class="d-flex justify-content-between flex-wrap">
            <div class="d-flex align-items-center mb-0 mt-1">
                <span class="text-nowrap"> Showing 1 to </span>
                <b-form-select
                    v-model="pageLength"
                    :options="['3', '5', '10']"
                    class="mx-1"
                    @input="
                        (value) =>
                            props.perPageChanged({
                                currentPerPage: value,
                            })
                    "
                />
                <span class="text-nowrap">
                    of {{ props.total }} entries
                </span>
            </div>
            <div>
                <b-pagination
                    :value="1"
                    :total-rows="props.total"
                    :per-page="pageLength"
                    first-number
                    last-number
                    align="right"
                    prev-class="prev-item"
                    next-class="next-item"
                    class="mt-1 mb-0"
                    @input="
                        (value) =>
                            props.pageChanged({ currentPage: value })
                    "
                >
                    <template #prev-text>
                        <feather-icon
                            icon="ChevronLeftIcon"
                            size="18"
                        />
                    </template>
                    <template #next-text>
                        <feather-icon
                            icon="ChevronRightIcon"
                            size="18"
                        />
                    </template>
                </b-pagination>
            </div>
        </div>
    </template>
</vue-good-table>

its showing the table like that:

Now on this table I have useed v-b-toggle.sidebar-right to show a sidebar. So when I click on any row ( including header ) its showing me a sidebar.

But I do not want to show the sidebar when the table header (red mark) is clicked.

Is there any way I can prevent?

Or

You can see I have used @on-row-click="onRowClick" event. Is there anyway to show the sidebar on this event?