feat: refactor navigation drawer

Refactor navigation drawer. Make list-items more compact and less rounded. Remove automatic branding transitions.

Author: ItsPierre

src/components/navigation-drawer/CNavigationDrawer.vue

@@ -5,13 +5,11 @@
     :class="rail ? 'rail' : ''"
     rail-width="80"
     mobile-breakpoint="md"
-    class="c-navigation-drawer rounded-xl"
+    class="c-navigation-drawer"
   >
     <div class="d-flex flex-column" style="height: 100%">
       <!-- Branding -->
-      <v-list v-if="slots['branding']" nav class="my-3 ml-1">
-        <slot name="branding"></slot>
-      </v-list>
+      <slot name="branding"></slot>
 
       <div
         class="d-flex flex-column overflow-x-hidden overflow-y-auto"

src/components/navigation-drawer/CNavigationItem.vue

@@ -4,13 +4,11 @@
       :prepend-icon="icon"
       :title="label"
       :to="to"
-      class="mb-0 full-width"
+      class="mb-0 full-width py-2 my-1"
       min-height="unset"
+      rounded="lg"
     >
     </v-list-item>
-    <div class="rail-label d-flex align-center justify-center">
-      <p>{{ label }}</p>
-    </div>
   </div>
 </template>
 
@@ -40,45 +38,4 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss">
-.c-navigation-item {
-  height: 56px;
-
-  .rail-label {
-    font-size: 10px;
-    opacity: 0;
-    height: 0;
-    // The default rail width - the padding of the nav-drawer
-    width: calc(80px - 16px);
-  }
-
-  .v-list-item {
-    height: 48px;
-  }
-}
-
-// When used in navigation drawer, show it on rail mode
-.c-navigation-drawer.rail {
-  .c-navigation-subtitle {
-    opacity: 0;
-    height: 0;
-  }
-
-  .v-list-item .v-list-item__content {
-    opacity: 0;
-  }
-
-  .c-navigation-item {
-    margin-bottom: 12px;
-
-    .v-list-item {
-      height: 32px;
-    }
-
-    .rail-label {
-      opacity: 100%;
-      height: 20px;
-    }
-  }
-}
-</style>
+<style lang="scss"></style>

src/components/navigation-drawer/CNavigationSubtitle.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="c-navigation-subtitle mb-3 ml-5 text-grey-darken-2 font-weight-bold"
+    class="c-navigation-subtitle mb-1 ml-5 text-grey-darken-2 font-weight-bold"
     :class="classes"
   >
     {{ title }}
@@ -52,7 +52,7 @@ const props = withDefaults(
 }
 
 .v-list .c-navigation-subtitle:not(:first-child) {
-  margin-top: 16px;
+  margin-top: 4px;
 }
 
 // When used in navigation drawer, hide it on rail mode