Hi,

Sorry for the late reply.

This bug is related to z-index. We will include a fix for it in the next Metronic release.

To resolve it now, set the $app-sidebar-fixed-z-index variable to 110.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

//my sidebar code
<div class="flex grow">
<div class="kt-sidebar bg-background border-e border-e-border fixed top-0 bottom-0 z-20 lg:flex flex-col gap-4 items-stretch shrink-0 [--kt-drawer-enable:true] lg:[--kt-drawer-enable:false]"
data-kt-drawer="true" data-kt-drawer-class="kt-drawer kt-drawer-start top-0 bottom-0" >
<div class="kt-sidebar-header hidden lg:flex items-center relative justify-between px-3 lg:px-6 shrink-0"
>
<a class="mt-4" href="#">
<img class="default-logo w-20 max-w-none" src="assets/images/brand-logo.png" />
</a>
<button
class="kt-btn kt-btn-outline kt-btn-icon size-[30px] absolute start-full top-2/4 -translate-x-2/4 -translate-y-2/4 rtl:translate-x-2/4"
data-kt-toggle="body" data-kt-toggle-class="kt-sidebar" >
<i
class="ki-filled ki-black-left-line kt-toggle-active:rotate-180 transition-all duration-300 rtl:translate rtl:rotate-180 rtl:kt-toggle-active:rotate-0">
</i>
</button>
</div>
<div class="kt-sidebar-content flex grow shrink-0 py-5 pe-2" >
<div class="kt-scrollable-y-hover grow shrink-0 flex ps-2 lg:ps-5 pe-1 lg:pe-3" data-kt-scrollable="true"
data-kt-scrollable-dependencies="#sidebar_header" data-kt-scrollable-height="auto"
data-kt-scrollable-offset="0px" data-kt-scrollable-wrappers="#sidebar_content" >
<!-- Sidebar Menu -->
<div class="kt-menu flex flex-col grow gap-4" data-kt-menu="true"
data-kt-menu-accordion-expand-all="false" >
<div class="kt-menu-item" data-kt-menu-item-toggle="accordion" data-kt-menu-item-trigger="click"
v-for="(menu, index) in menus" :key="index">
<div class="kt-menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] ps-[10px] pe-[10px] py-[6px]"
tabindex="0">
<span class="kt-menu-icon items-start text-muted-foreground w-[20px]">
<i :class="`${menu.icon} text-lg`"></i>
</span>
<span
class="kt-menu-title text-sm font-medium text-foreground kt-menu-item-active:text-primary kt-menu-link-hover:!text-primary">
{{ menu.title }}
</span>
<span
class="kt-menu-arrow text-muted-foreground w-[20px] shrink-0 justify-end ms-1 me-[-10px]">
<span class="inline-flex kt-menu-item-show:hidden">
<i class="ki-filled ki-plus text-[11px]">
</i>
</span>
<span class="hidden kt-menu-item-show:inline-flex">
<i class="ki-filled ki-minus text-[11px]">
</i>
</span>
</span>
</div>
<div
class="kt-menu-accordion gap-1 ps-[10px] relative before:absolute before:start-[20px] before:top-0 before:bottom-0 before:border-s before:border-border">
<div class="kt-menu-item" v-for="(submenu, index) in menu.submenus">
<a class="kt-menu-link border border-transparent items-center grow kt-menu-item-active:bg-accent/60 dark:menu-item-active:border-border kt-menu-item-active:rounded-lg hover:bg-accent/60 hover:rounded-lg gap-[14px] ps-[10px] pe-[10px] py-[8px]"
:href="submenu.link" tabindex="0">
<span
class="kt-menu-bullet flex w-[6px] -start-[3px] rtl:start-0 relative before:absolute before:top-0 before:size-[6px] before:rounded-full rtl:before:translate-x-1/2 before:-translate-y-1/2 kt-menu-item-active:before:bg-primary kt-menu-item-hover:before:bg-primary">
</span>
<span
class="kt-menu-title text-2sm font-normal text-foreground kt-menu-item-active:text-primary kt-menu-item-active:font-semibold kt-menu-link-hover:!text-primary">
{{ submenu.title }}
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Header -->
<div class="kt-wrapper flex grow flex-col">
<div class="kt-header fixed top-0 z-10 start-0 end-0 flex items-stretch shrink-0 bg-gray-100 py-2"
data-kt-sticky="true" data-kt-sticky-class="border-b border-border" data-kt-sticky-name="header"
>
<div class="flex justify-between lg:justify-end items-stretch lg:gap-4 w-full px-4" >
<div class="flex items-center lg:hidden">
<a class="shrink-0" href="#">
<img class="max-h-[25px] w-full" src="assets/images/brand-logo.png" />
</a>
<div class="flex items-center">
<button class="kt-btn kt-btn-icon kt-btn-ghost" data-kt-drawer-toggle="#sidebar">
<i class="ki-filled ki-menu">
</i>
</button>
<button class="kt-btn kt-btn-icon kt-btn-ghost" data-kt-drawer-toggle="#mega_menu_wrapper">
<i class="ki-filled ki-burger-menu-2">
</i>
</button>
</div>
</div>
<div class="flex items-center gap-2.5">
<button
class="group kt-btn kt-btn-ghost kt-btn-icon size-9 rounded-full hover:bg-primary/10 hover:[&_i]:text-primary"
data-kt-modal-toggle="#search_modal">
<i class="ki-filled ki-notification text-xl group-hover:text-primary"></i>
</button>
<div class="shrink-0" data-kt-dropdown="true" data-kt-dropdown-offset="10px, 10px"
data-kt-dropdown-offset-rtl="-20px, 10px" data-kt-dropdown-placement="bottom-end"
data-kt-dropdown-placement-rtl="bottom-start" data-kt-dropdown-trigger="click">
<div class="cursor-pointer shrink-0" data-kt-dropdown-toggle="true">
<i class="ki-filled ki-profile-circle text-xl mt-1"></i>
</div>
</div>
<button @click="logout"
class="group kt-btn kt-btn-ghost kt-btn-icon size-9 rounded-full hover:bg-primary/10 hover:[&_i]:text-primary"
data-kt-modal-toggle="#search_modal">
<i class="ki-filled ki-exit-right text-xl group-hover:text-primary"></i>
</button>
</div>
</div>
</div>
</div>
</div>