diff --git a/src/components/common/menu-toggler.vue b/src/components/common/menu-toggler.vue
index 2c2b5ff6..e7cdb93a 100644
--- a/src/components/common/menu-toggler.vue
+++ b/src/components/common/menu-toggler.vue
@@ -9,9 +9,13 @@ interface Props {
   collapsed?: boolean;
   /** Arrow style icon */
   arrowIcon?: boolean;
+  zIndex?: number;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  arrowIcon: false,
+  zIndex: 98
+});
 
 type NumberBool = 0 | 1;
 
@@ -39,7 +43,7 @@ const icon = computed(() => {
   <ButtonIcon
     :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
     tooltip-placement="bottom-start"
-    :z-index="99"
+    :z-index="zIndex"
   >
     <SvgIcon :icon="icon" />
   </ButtonIcon>
diff --git a/src/layouts/modules/global-menu/first-level-menu.vue b/src/layouts/modules/global-menu/first-level-menu.vue
index 8a7981e9..290ec6da 100644
--- a/src/layouts/modules/global-menu/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/first-level-menu.vue
@@ -92,6 +92,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
     <MenuToggler
       arrow-icon
       :collapsed="appStore.siderCollapse"
+      :z-index="99"
       :class="{ 'text-white:88 !hover:text-white': inverted }"
       @click="appStore.toggleSiderCollapse"
     />