fix(projects): fix horizontal menu

soybeanjs · Jan 25, 2024 · d886e50 · d886e50
1 parent 4aae6a5
commit d886e50
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/src/layouts/modules/global-menu/base-menu.vue b/src/layouts/modules/global-menu/base-menu.vue
@@ -35,9 +35,7 @@ const isHorizontal = computed(() => props.mode === 'horizontal');
 
 const siderCollapse = computed(() => themeStore.layout.mode === 'vertical' && appStore.siderCollapse);
 
-const menuHeightStyle = computed(() =>
-  isHorizontal.value ? { '--n-item-height': `${themeStore.header.height}px` } : {}
-);
+const headerHeight = computed(() => `${themeStore.header.height}px`);
 
 const selectedKey = computed(() => {
   const { hideInMenu, activeMenu } = route.meta;
@@ -83,11 +81,14 @@ watch(
       :options="naiveMenus"
       :inverted="darkTheme"
       :indent="18"
-      class="transition-300"
-      :style="menuHeightStyle"
+      responsive
       @update:value="handleClickMenu"
     />
   </SimpleScrollbar>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.n-menu--horizontal) {
+  --n-item-height: v-bind(headerHeight) !important;
+}
+</style>