fix(projects): fix inverted menu when is horizontal-mix

soybeanjs · Nov 11, 2023 · 1530dae · 1530dae
1 parent 2d59dd6
commit 1530dae
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/src/layouts/modules/global-menu/first-level-menu.vue b/src/layouts/modules/global-menu/first-level-menu.vue
@@ -13,6 +13,7 @@ defineOptions({
 
 interface Props {
   activeMenuKey?: string;
+  inverted?: boolean;
 }
 
 defineProps<Props>();
@@ -47,8 +48,6 @@ interface MixMenuItemProps {
 }
 const [DefineMixMenuItem, MixMenuItem] = createReusableTemplate<MixMenuItemProps>();
 
-const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
-
 const selectedBgColor = computed(() => {
   const { darkMode, themeColor } = themeStore;
 
@@ -70,8 +69,8 @@ function handleClickMixMenu(menu: App.Global.Menu) {
       class="flex-vertical-center mx-4px mb-6px py-8px px-4px rounded-8px bg-transparent transition-300 cursor-pointer hover:bg-[rgb(0,0,0,0.08)]"
       :class="{
         'text-primary selected-mix-menu': active,
-        'text-white:65 hover:text-white': siderInverted,
-        '!text-white !bg-primary': active && siderInverted
+        'text-white:65 hover:text-white': inverted,
+        '!text-white !bg-primary': active && inverted
       }"
     >
       <component :is="icon" :class="[isMini ? 'text-icon-small' : 'text-icon-large']" />
@@ -101,7 +100,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
     <MenuToggler
       arrow-icon
       :collapsed="appStore.siderCollapse"
-      :class="{ 'text-white:88 !hover:text-white': siderInverted }"
+      :class="{ 'text-white:88 !hover:text-white': inverted }"
       @click="appStore.toggleSiderCollapse"
     />
   </div>

diff --git a/src/layouts/modules/global-menu/vertical-mix-menu.vue b/src/layouts/modules/global-menu/vertical-mix-menu.vue
@@ -44,7 +44,7 @@ function handleResetActiveMenu() {
 
 <template>
   <div class="flex h-full" @mouseleave="handleResetActiveMenu">
-    <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" @select="handleSelectMixMenu">
+    <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" :inverted="siderInverted" @select="handleSelectMixMenu">
       <slot></slot>
     </FirstLevelMenu>
     <div

diff --git a/src/layouts/modules/global-sider/index.vue b/src/layouts/modules/global-sider/index.vue
@@ -16,9 +16,9 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 
-const darkMenu = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
 const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
 const isHorizontalMix = computed(() => themeStore.layout.mode === 'horizontal-mix');
+const darkMenu = computed(() => !themeStore.darkMode && !isHorizontalMix.value && themeStore.sider.inverted);
 const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
 </script>