feat: Reduce Spacing between Sidebar items - Meeds-io/MIPs#159

Meeds-io · Nov 26, 2024 · 1cc88bb · 1cc88bb
1 parent bd4ab77
commit 1cc88bb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/...-apps/general-settings/components/navigation/sidebar/NavigationSettingsSidebarPreview.vue b/...-apps/general-settings/components/navigation/sidebar/NavigationSettingsSidebarPreview.vue
@@ -29,12 +29,19 @@
     flat>
     <v-list class="d-flex flex-column overflow-hidden pb-0 flex-grow-1 flex-shrink-1" dense>
       <div class="flex-grow-0 flex-shrink-0">
-        <v-list-item class="d-flex" dense>
-          <v-list-item-avatar size="36" tile>
+        <v-list-item class="d-flex">
+          <v-list-item-avatar
+            class="my-auto me-2"
+            min-width="40"
+            max-width="40"
+            min-height="36"
+            height="auto"
+            max-height="36"
+            tile>
             <img
               src="/portal/rest/v1/platform/branding/logo"
-              height="36px"
-              width="auto"
+              height="auto"
+              width="36px"
               alt="">
           </v-list-item-avatar>
           <v-list-item-content>

diff --git a/...s/general-settings/components/navigation/sidebar/NavigationSettingsSidebarPreviewItem.vue b/...s/general-settings/components/navigation/sidebar/NavigationSettingsSidebarPreviewItem.vue
@@ -32,10 +32,8 @@
   </div>
   <div v-else-if="isSpaces || isSpaceTemplate">
     <template v-if="item?.items?.length || isSpaces">
-      <v-list-item
-        class="d-flex"
-        dense>
-        <v-list-item-avatar min-width="36">
+      <v-list-item class="d-flex">
+        <v-list-item-avatar class="me-2 my-auto" min-width="36">
           <v-icon size="18">{{ item.icon || 'fa-folder' }}</v-icon>
         </v-list-item-avatar>
         <v-list-item-content>
@@ -55,14 +53,13 @@
   </div>
   <v-list-item
     v-else
-    class="d-flex"
-    dense>
-    <v-list-item-avatar min-width="36">
+    class="d-flex">
+    <v-list-item-avatar class="me-2 my-auto" min-width="36">
       <v-icon v-if="!item.avatar" size="18">{{ item.icon || 'fa-folder' }}</v-icon>
     </v-list-item-avatar>
     <v-list-item-avatar
       v-if="item.avatar"
-      class="me-4"
+      class="me-2 my-auto"
       min-width="36"
       width="36"
       height="36"