refactor(menu): optimize the margin on the menu

This commit is contained in:
Nicholas LD 2025-08-14 08:58:01 +00:00
parent 0e586201ec
commit 7f97a99aab
2 changed files with 12 additions and 10 deletions

View File

@ -61,7 +61,7 @@ function toggleSiderCollapse() {
<!-- define component: MixMenuItem --> <!-- define component: MixMenuItem -->
<DefineMixMenuItem v-slot="{ label, icon, active, isMini }"> <DefineMixMenuItem v-slot="{ label, icon, active, isMini }">
<div <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="{ :class="{
'text-primary selected-mix-menu': active, 'text-primary selected-mix-menu': active,
'text-white:65 hover:text-white': inverted, 'text-white:65 hover:text-white': inverted,

View File

@ -30,6 +30,7 @@ const { selectedKey } = useMenu();
/> />
</Teleport> </Teleport>
<Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`"> <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
<div class="pt-2">
<FirstLevelMenu <FirstLevelMenu
:menus="firstLevelMenus" :menus="firstLevelMenus"
:active-menu-key="activeFirstLevelMenuKey" :active-menu-key="activeFirstLevelMenuKey"
@ -39,6 +40,7 @@ const { selectedKey } = useMenu();
@select="handleSelectFirstLevelMenu" @select="handleSelectFirstLevelMenu"
@toggle-sider-collapse="appStore.toggleSiderCollapse" @toggle-sider-collapse="appStore.toggleSiderCollapse"
/> />
</div>
</Teleport> </Teleport>
</template> </template>