From 7f97a99aabc321d5dfa4413dde3c93672bd30538 Mon Sep 17 00:00:00 2001
From: Nicholas LD <36059320+NicholasLD@users.noreply.github.com>
Date: Thu, 14 Aug 2025 08:58:01 +0000
Subject: [PATCH] refactor(menu): optimize the margin on the menu

---
 .../components/first-level-menu.vue           |  2 +-
 .../modules/top-hybrid-sidebar-first.vue      | 20 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/layouts/modules/global-menu/components/first-level-menu.vue b/src/layouts/modules/global-menu/components/first-level-menu.vue
index 6aff6e94..d0a6fdfc 100644
--- a/src/layouts/modules/global-menu/components/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/components/first-level-menu.vue
@@ -61,7 +61,7 @@ function toggleSiderCollapse() {
   <!-- define component: MixMenuItem -->
   <DefineMixMenuItem v-slot="{ label, icon, active, isMini }">
     <div
-      class="mx-4px mb-6px flex-col-center cursor-pointer rounded-8px bg-transparent px-4px py-8px transition-300 first:mt-2 hover:bg-[rgb(0,0,0,0.08)]"
+      class="mx-4px mb-6px flex-col-center cursor-pointer rounded-8px bg-transparent px-4px py-8px transition-300 hover:bg-[rgb(0,0,0,0.08)]"
       :class="{
         'text-primary selected-mix-menu': active,
         'text-white:65 hover:text-white': inverted,
diff --git a/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
index 3bb0b2ce..2f253542 100644
--- a/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
+++ b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
@@ -30,15 +30,17 @@ const { selectedKey } = useMenu();
     />
   </Teleport>
   <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
-    <FirstLevelMenu
-      :menus="firstLevelMenus"
-      :active-menu-key="activeFirstLevelMenuKey"
-      :sider-collapse="appStore.siderCollapse"
-      :dark-mode="themeStore.darkMode"
-      :theme-color="themeStore.themeColor"
-      @select="handleSelectFirstLevelMenu"
-      @toggle-sider-collapse="appStore.toggleSiderCollapse"
-    />
+    <div class="pt-2">
+      <FirstLevelMenu
+        :menus="firstLevelMenus"
+        :active-menu-key="activeFirstLevelMenuKey"
+        :sider-collapse="appStore.siderCollapse"
+        :dark-mode="themeStore.darkMode"
+        :theme-color="themeStore.themeColor"
+        @select="handleSelectFirstLevelMenu"
+        @toggle-sider-collapse="appStore.toggleSiderCollapse"
+      />
+    </div>
   </Teleport>
 </template>