Sidebar not collapse when clicked button toggle sidebar
I'm looking for some advice to solve my problem.
I use sidebar template demo 1 with vue 3. my sidebar didn't collapse when I clicked button to collapse it
Where have I gone wrong? please help me to solve this problem
// sidebar tag
<div class="kt-sidebar bg-background border-e border-e-border fixed z-20 lg:flex flex-col items-stretch shrink-0 [--kt-drawer-enable:true] lg:[--kt-drawer-enable:false] hidden"
data-kt-drawer="true" data-kt-drawer-class="kt-drawer kt-drawer-start top-0 bottom-0" id="sidebar" data-kt-drawer-initialized="true" >
// button to collapse sidebar
<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 active" data-kt-toggle="body" data-kt-toggle-class="kt-sidebar-collapse" id="sidebar_toggle" data-kt-toggle-initialized="true">
<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>
Replies (2)
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
<!-- 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>
