From d886e50fd3df91e83f93b3e0f8acf96e73393fca Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Thu, 25 Jan 2024 18:52:00 +0800
Subject: [PATCH] fix(projects): fix horizontal menu

---
 src/layouts/modules/global-menu/base-menu.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/layouts/modules/global-menu/base-menu.vue b/src/layouts/modules/global-menu/base-menu.vue
index 2c0f6c6d..c3d24f4c 100644
--- 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>