feat: reduce sidebar width

kirklin · Nov 25, 2024 · ca4c7f1 · ca4c7f1
1 parent dff7b4a
commit ca4c7f1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/apps/admin/src/layouts/header/components/UserInfoButton.vue b/apps/admin/src/layouts/header/components/UserInfoButton.vue
@@ -36,7 +36,7 @@ function handleLogout() {
               <NAvatar round :src="userInfo?.avatarUrl" />
             </div>
             <div class="flex-1 flex items-center justify-center">
-              <svg class="text-center text-[var(--text-color-base)] text-xl i-tabler:user" />
+              <svg class="text-center text-[var(--text-color-base)] text-xl i-line-md:account" />
             </div>
           </div>
         </NEl>

diff --git a/apps/admin/src/layouts/sidebar/components/Menu.vue b/apps/admin/src/layouts/sidebar/components/Menu.vue
@@ -83,15 +83,17 @@ watch(
     immediate: true,
   },
 );
-const collapsedWidth = computed<number>(() => collapsed.value ? 64 : 300);
+const collapsedWidth = computed<number>(() => collapsed.value ? 56 : 224);
 </script>
 
 <template>
-  <div :class="collapsed ? 'w-16' : 'w-75'" class="transition-width h-full shrink-0 flex-col overflow-hidden duration-75">
+  <div :class="collapsed ? 'w-14' : 'w-60'" class="transition-width h-full shrink-0 flex-col overflow-hidden duration-90">
     <NScrollbar class="max-h-[calc(100vh_-_4rem)]">
       <NMenu
         v-model:value="activeMenu"
         :collapsed="collapsed"
+        :root-indent="20"
+        :indent="12"
         :collapsed-width="collapsedWidth"
         :mode="mode" :options="menuList"
       />

diff --git a/apps/admin/src/layouts/tabs/index.vue b/apps/admin/src/layouts/tabs/index.vue
@@ -41,7 +41,7 @@ listenToRouteChange((route) => {
           {{ localize(tab.title) }}
         </span>
         <template #icon>
-          <div class="hover:color-primary-color hover:bg-[var(--action-color)] cursor-pointer mr-1 transition" @click="pinnedTab(tab)">
+          <div class="rounded-full hover:color-primary-color hover:bg-[var(--action-color)] cursor-pointer transition" @click="pinnedTab(tab)">
             <CAIcon :size="14" icon="tabler:pinned" />
           </div>
         </template>
@@ -63,7 +63,7 @@ listenToRouteChange((route) => {
         </div>
       </NTag>
     </TransitionGroup>
-    <div class="bar absolute bottom-[-0.5rem] bg-action-color rounded-2xl left-0 w-full h-1" />
+    <!--    <div class="bar absolute bottom-[-0.5rem] bg-action-color rounded-2xl left-0 w-full h-1" /> -->
   </div>
 </template>