refactor(projects)!: refactor global menu & support reversed-horizontal-mix-menu. close #365

src/layouts/modules/global-menu/base-menu.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import type { MentionOption, MenuProps } from 'naive-ui';
-import { SimpleScrollbar } from '@sa/materials';
-import type { RouteKey } from '@elegant-router/types';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import { useRouterPush } from '@/hooks/common/router';
-
-defineOptions({
-  name: 'BaseMenu'
-});
-
-interface Props {
-  darkTheme?: boolean;
-  mode?: MenuProps['mode'];
-  menus: App.Global.Menu[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'vertical'
-});
-
-const route = useRoute();
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-const { routerPushByKey } = useRouterPush();
-
-const naiveMenus = computed(() => props.menus as unknown as MentionOption[]);
-
-const isHorizontal = computed(() => props.mode === 'horizontal');
-
-const siderCollapse = computed(() => themeStore.layout.mode === 'vertical' && appStore.siderCollapse);
-
-const headerHeight = computed(() => `${themeStore.header.height}px`);
-
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return routeName;
-});
-
-const expandedKeys = ref<string[]>([]);
-
-function updateExpandedKeys() {
-  if (isHorizontal.value || siderCollapse.value || !selectedKey.value) {
-    expandedKeys.value = [];
-    return;
-  }
-  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
-}
-
-function handleClickMenu(key: RouteKey) {
-  const query = routeStore.getRouteQueryOfMetaByKey(key);
-
-  routerPushByKey(key, { query });
-}
-
-watch(
-  () => route.name,
-  () => {
-    updateExpandedKeys();
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <SimpleScrollbar>
-    <NMenu
-      v-model:expanded-keys="expandedKeys"
-      :mode="mode"
-      :value="selectedKey"
-      :collapsed="siderCollapse"
-      :collapsed-width="themeStore.sider.collapsedWidth"
-      :collapsed-icon-size="22"
-      :options="naiveMenus"
-      :inverted="darkTheme"
-      :indent="18"
-      responsive
-      @update:value="handleClickMenu"
-    />
-  </SimpleScrollbar>
-</template>
-
-<style scoped>
-:deep(.n-menu--horizontal) {
-  --n-item-height: v-bind(headerHeight) !important;
-}
-</style>

src/layouts/modules/global-menu/components/first-level-menu.vue

@@ -3,31 +3,29 @@ import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
 import { transformColorWithOpacity } from '@sa/color';
-import { useAppStore } from '@/store/modules/app';
-import { useRouteStore } from '@/store/modules/route';
-import { useThemeStore } from '@/store/modules/theme';
 
 defineOptions({
   name: 'FirstLevelMenu'
 });
 
 interface Props {
+  menus: App.Global.Menu[];
   activeMenuKey?: string;
   inverted?: boolean;
+  siderCollapse?: boolean;
+  darkMode?: boolean;
+  themeColor: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 interface Emits {
   (e: 'select', menu: App.Global.Menu): boolean;
+  (e: 'toggleSiderCollapse'): void;
 }
 
 const emit = defineEmits<Emits>();
 
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-
 interface MixMenuItemProps {
   /** Menu item label */
   label: App.Global.Menu['label'];
@@ -36,12 +34,12 @@ interface MixMenuItemProps {
   /** Active menu item */
   active: boolean;
   /** Mini size */
-  isMini: boolean;
+  isMini?: boolean;
 }
 const [DefineMixMenuItem, MixMenuItem] = createReusableTemplate<MixMenuItemProps>();
 
 const selectedBgColor = computed(() => {
-  const { darkMode, themeColor } = themeStore;
+  const { darkMode, themeColor } = props;
 
   const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
   const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');
@@ -52,6 +50,10 @@ const selectedBgColor = computed(() => {
 function handleClickMixMenu(menu: App.Global.Menu) {
   emit('select', menu);
 }
+
+function toggleSiderCollapse() {
+  emit('toggleSiderCollapse');
+}
 </script>
 
 <template>
@@ -80,21 +82,21 @@ function handleClickMixMenu(menu: App.Global.Menu) {
     <slot></slot>
     <SimpleScrollbar>
       <MixMenuItem
-        v-for="menu in routeStore.menus"
+        v-for="menu in menus"
         :key="menu.key"
         :label="menu.label"
         :icon="menu.icon"
         :active="menu.key === activeMenuKey"
-        :is-mini="appStore.siderCollapse"
+        :is-mini="siderCollapse"
         @click="handleClickMixMenu(menu)"
       />
     </SimpleScrollbar>
     <MenuToggler
       arrow-icon
-      :collapsed="appStore.siderCollapse"
+      :collapsed="siderCollapse"
       :z-index="99"
       :class="{ 'text-white:88 !hover:text-white': inverted }"
-      @click="appStore.toggleSiderCollapse"
+      @click="toggleSiderCollapse"
     />
   </div>
 </template>

src/layouts/modules/global-menu/horizontal-mix-menu.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenuContext } from '../../context';
-import FirstLevelMenu from './first-level-menu.vue';
-
-defineOptions({
-  name: 'HorizontalMixMenu'
-});
-
-const { activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
-const { routerPushByKey } = useRouterPush();
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (!menu.children?.length) {
-    routerPushByKey(menu.routeKey);
-  }
-}
-</script>
-
-<template>
-  <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" @select="handleSelectMixMenu">
-    <slot></slot>
-  </FirstLevelMenu>
-</template>
-
-<style scoped></style>

src/layouts/modules/global-menu/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { useThemeStore } from '@/store/modules/theme';
+import VerticalMenu from './modules/vertical-menu.vue';
+import VerticalMixMenu from './modules/vertical-mix-menu.vue';
+import HorizontalMenu from './modules/horizontal-menu.vue';
+import HorizontalMixMenu from './modules/horizontal-mix-menu.vue';
+import ReversedHorizontalMixMenu from './modules/reversed-horizontal-mix-menu.vue';
+
+defineOptions({
+  name: 'GlobalMenu'
+});
+
+const themeStore = useThemeStore();
+
+const activeMenu = computed(() => {
+  const menuMap: Record<UnionKey.ThemeLayoutMode, Component> = {
+    vertical: VerticalMenu,
+    'vertical-mix': VerticalMixMenu,
+    horizontal: HorizontalMenu,
+    'horizontal-mix': themeStore.layout.reverseHorizontalMix ? ReversedHorizontalMixMenu : HorizontalMixMenu
+  };
+
+  return menuMap[themeStore.layout.mode];
+});
+</script>
+
+<template>
+  <component :is="activeMenu" />
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/horizontal-menu.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+
+defineOptions({
+  name: 'HorizontalMenu'
+});
+
+const route = useRoute();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="selectedKey"
+      :options="routeStore.menus"
+      :indent="18"
+      responsive
+      @update:value="routerPushByKeyWithMetaQuery"
+    />
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import { useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'HorizontalMixMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (!menu.children?.length) {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="selectedKey"
+      :options="childLevelMenus"
+      :indent="18"
+      responsive
+      @update:value="routerPushByKeyWithMetaQuery"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <FirstLevelMenu
+      :menus="allMenus"
+      :active-menu-key="activeFirstLevelMenuKey"
+      :inverted="inverted"
+      :sider-collapse="appStore.siderCollapse"
+      :dark-mode="themeStore.darkMode"
+      :theme-color="themeStore.themeColor"
+      @select="handleSelectMixMenu"
+      @toggle-sider-collapse="appStore.toggleSiderCollapse"
+    >
+      <slot></slot>
+    </FirstLevelMenu>
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import type { RouteKey } from '@elegant-router/types';
+import { SimpleScrollbar } from '@sa/materials';
+import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'ReversedHorizontalMixMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const {
+  firstLevelMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  isActiveFirstLevelMenuHasChildren
+} = useMixMenuContext();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+function handleSelectMixMenu(key: RouteKey) {
+  setActiveFirstLevelMenuKey(key);
+
+  if (!isActiveFirstLevelMenuHasChildren.value) {
+    routerPushByKeyWithMetaQuery(key);
+  }
+}
+
+const expandedKeys = ref<string[]>([]);
+
+function updateExpandedKeys() {
+  if (appStore.siderCollapse || !selectedKey.value) {
+    expandedKeys.value = [];
+    return;
+  }
+  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
+}
+
+watch(
+  () => route.name,
+  () => {
+    updateExpandedKeys();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <NMenu
+      mode="horizontal"
+      :value="activeFirstLevelMenuKey"
+      :options="firstLevelMenus"
+      :indent="18"
+      responsive
+      @update:value="handleSelectMixMenu"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <NMenu
+        v-model:expanded-keys="expandedKeys"
+        mode="vertical"
+        :value="selectedKey"
+        :collapsed="appStore.siderCollapse"
+        :collapsed-width="themeStore.sider.collapsedWidth"
+        :collapsed-icon-size="22"
+        :options="childLevelMenus"
+        :inverted="inverted"
+        :indent="18"
+        @update:value="routerPushByKeyWithMetaQuery"
+      />
+    </SimpleScrollbar>
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/vertical-menu.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { SimpleScrollbar } from '@sa/materials';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+
+defineOptions({
+  name: 'VerticalMenu'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+const expandedKeys = ref<string[]>([]);
+
+function updateExpandedKeys() {
+  if (appStore.siderCollapse || !selectedKey.value) {
+    expandedKeys.value = [];
+    return;
+  }
+  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
+}
+
+watch(
+  () => route.name,
+  () => {
+    updateExpandedKeys();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <NMenu
+        v-model:expanded-keys="expandedKeys"
+        mode="vertical"
+        :value="selectedKey"
+        :collapsed="appStore.siderCollapse"
+        :collapsed-width="themeStore.sider.collapsedWidth"
+        :collapsed-icon-size="22"
+        :options="routeStore.menus"
+        :inverted="inverted"
+        :indent="18"
+        @update:value="routerPushByKeyWithMetaQuery"
+      />
+    </SimpleScrollbar>
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/modules/vertical-mix-menu.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { SimpleScrollbar } from '@sa/materials';
+import { useBoolean } from '@sa/hooks';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { $t } from '@/locales';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useMixMenuContext } from '../../../context';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import GlobalLogo from '../../global-logo/index.vue';
+
+defineOptions({
+  name: 'VerticalMenuMix'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
+const {
+  allMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  getActiveFirstLevelMenuKey
+  //
+} = useMixMenuContext();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const hasChildMenus = computed(() => childLevelMenus.value.length > 0);
+
+const showDrawer = computed(() => hasChildMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (menu.children?.length) {
+    setDrawerVisible(true);
+  } else {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+
+function handleResetActiveMenu() {
+  getActiveFirstLevelMenuKey();
+  setDrawerVisible(false);
+}
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+const expandedKeys = ref<string[]>([]);
+
+function updateExpandedKeys() {
+  if (appStore.siderCollapse || !selectedKey.value) {
+    expandedKeys.value = [];
+    return;
+  }
+  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
+}
+
+watch(
+  () => route.name,
+  () => {
+    updateExpandedKeys();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <div class="h-full flex" @mouseleave="handleResetActiveMenu">
+      <FirstLevelMenu
+        :menus="allMenus"
+        :active-menu-key="activeFirstLevelMenuKey"
+        :inverted="inverted"
+        :sider-collapse="appStore.siderCollapse"
+        :dark-mode="themeStore.darkMode"
+        :theme-color="themeStore.themeColor"
+        @select="handleSelectMixMenu"
+        @toggle-sider-collapse="appStore.toggleSiderCollapse"
+      >
+        <GlobalLogo :show-title="false" :style="{ height: themeStore.header.height + 'px' }" />
+      </FirstLevelMenu>
+      <div
+        class="relative h-full transition-width-300"
+        :style="{ width: appStore.mixSiderFixed && hasChildMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+      >
+        <DarkModeContainer
+          class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
+          :inverted="inverted"
+          :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+        >
+          <header class="flex-y-center justify-between px-12px" :style="{ height: themeStore.header.height + 'px' }">
+            <h2 class="text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
+            <PinToggler
+              :pin="appStore.mixSiderFixed"
+              :class="{ 'text-white:88 !hover:text-white': inverted }"
+              @click="appStore.toggleMixSiderFixed"
+            />
+          </header>
+          <SimpleScrollbar>
+            <NMenu
+              v-model:expanded-keys="expandedKeys"
+              mode="vertical"
+              :options="childLevelMenus"
+              :collapsed="appStore.siderCollapse"
+              :collapsed-width="themeStore.sider.collapsedWidth"
+              :collapsed-icon-size="22"
+              :inverted="inverted"
+              :indent="18"
+              @update:value="routerPushByKeyWithMetaQuery"
+            />
+          </SimpleScrollbar>
+        </DarkModeContainer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/vertical-mix-menu.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useBoolean } from '@sa/hooks';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-import { $t } from '@/locales';
-import { useMixMenuContext } from '../../context';
-import FirstLevelMenu from './first-level-menu.vue';
-import BaseMenu from './base-menu.vue';
-
-defineOptions({
-  name: 'VerticalMixMenu'
-});
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const { routerPushByKey } = useRouterPush();
-const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
-const { menus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenuContext();
-
-const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
-
-const hasMenus = computed(() => menus.value.length > 0);
-
-const showDrawer = computed(() => hasMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (menu.children?.length) {
-    setDrawerVisible(true);
-  } else {
-    routerPushByKey(menu.routeKey);
-  }
-}
-
-function handleResetActiveMenu() {
-  getActiveFirstLevelMenuKey();
-  setDrawerVisible(false);
-}
-</script>
-
-<template>
-  <div class="h-full flex" @mouseleave="handleResetActiveMenu">
-    <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" :inverted="siderInverted" @select="handleSelectMixMenu">
-      <slot></slot>
-    </FirstLevelMenu>
-    <div
-      class="relative h-full transition-width-300"
-      :style="{ width: appStore.mixSiderFixed && hasMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-    >
-      <DarkModeContainer
-        class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
-        :inverted="siderInverted"
-        :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-      >
-        <header class="flex-y-center justify-between px-12px" :style="{ height: themeStore.header.height + 'px' }">
-          <h2 class="text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
-          <PinToggler
-            :pin="appStore.mixSiderFixed"
-            :class="{ 'text-white:88 !hover:text-white': siderInverted }"
-            @click="appStore.toggleMixSiderFixed"
-          />
-        </header>
-        <BaseMenu :dark-theme="siderInverted" :menus="menus" />
-      </DarkModeContainer>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>