fix(projects): fix zIndex

src/components/common/menu-toggler.vue

@@ -8,10 +8,18 @@ interface Props {
 }
 
 defineProps<Props>();
+
+function getPopupContainer(triggerNode: HTMLElement) {
+  return triggerNode.parentElement!;
+}
 </script>
 
 <template>
-  <ButtonIcon :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')">
+  <ButtonIcon
+    :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
+    tooltip-placement="right"
+    :get-popup-container="getPopupContainer"
+  >
     <SvgIcon v-if="collapsed" icon="line-md:menu-fold-right" />
     <SvgIcon v-else icon="line-md:menu-fold-left" />
   </ButtonIcon>

src/components/custom/button-icon.vue

@@ -22,18 +22,29 @@ interface Props {
    * tooltip placement
    */
   tooltipPlacement?: TooltipPlacement;
+  /**
+   * get popup container
+   * @param triggerNode
+   */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 
 withDefaults(defineProps<Props>(), {
   cls: 'h-full text-icon',
   icon: '',
   tooltipContent: '',
-  tooltipPlacement: 'bottom'
+  tooltipPlacement: 'bottom',
+  getPopupContainer: () => document.body
 });
 </script>
 
 <template>
-  <ATooltip v-if="tooltipContent" :placement="tooltipPlacement" :title="tooltipContent">
+  <ATooltip
+    v-if="tooltipContent"
+    :placement="tooltipPlacement"
+    :get-popup-container="getPopupContainer"
+    :title="tooltipContent"
+  >
     <AButton type="text" :class="cls">
       <slot>
         <SvgIcon :icon="icon" />

src/layouts/base-layout/index.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { watch } from 'vue';
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 import { AdminLayout } from '@sa/materials';
 import { useAppStore } from '@/store/modules/app';
 import GlobalHeader from '../modules/global-header/index.vue';
@@ -9,25 +7,15 @@ import GlobalTab from '../modules/global-tab/index.vue';
 import GlobalContent from '../modules/global-content/index.vue';
 import GlobalFooter from '../modules/global-footer/index.vue';
 import ThemeDrawer from '../modules/theme-drawer/index.vue';
+import { useLayout } from '../hooks';
 
 defineOptions({
   name: 'BaseLayout'
 });
 
 const app = useAppStore();
 
-const breakpoints = useBreakpoints(breakpointsTailwind);
-const isMobile = breakpoints.smaller('sm');
-
-watch(
-  isMobile,
-  newValue => {
-    if (newValue) {
-      app.toggleSiderCollapse();
-    }
-  },
-  { immediate: true }
-);
+const { isMobile } = useLayout();
 </script>
 
 <template>

src/layouts/hooks/index.ts

@@ -0,0 +1,25 @@
+import { watch } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
+
+export function useLayout() {
+  const app = useAppStore();
+
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+
+  const isMobile = breakpoints.smaller('sm');
+
+  watch(
+    isMobile,
+    newValue => {
+      if (newValue) {
+        app.toggleSiderCollapse();
+      }
+    },
+    { immediate: true }
+  );
+
+  return {
+    isMobile
+  };
+}