refactor: Sidebar UI (#3390)

* Refactor sidebar links in DefaultLayout.vue

* 🧹

frontend/components/Layout/DefaultLayout.vue

@@ -6,8 +6,6 @@
         v-model="sidebar"
         absolute
         :top-link="topLinks"
-        :secondary-header="cookbookLinks.length ? $tc('sidebar.cookbooks') : undefined"
-        :secondary-header-link="isOwnGroup && cookbookLinks.length ? `/g/${groupSlug}/cookbooks` : undefined"
         :secondary-links="cookbookLinks || []"
         :bottom-links="isAdmin ? bottomLinks : []"
       >
@@ -146,14 +144,6 @@
           to: `/g/${groupSlug.value}/r/create/new`,
           restricted: true,
         },
-        {
-          insertDivider: true,
-          icon: $globals.icons.pages,
-          title: i18n.tc("sidebar.cookbook"),
-          subtitle: i18n.tc("sidebar.create-cookbook"),
-          to: `/g/${groupSlug.value}/cookbooks`,
-          restricted: true,
-        },
       ]);
 
       const bottomLinks = computed<SidebarLinks>(() => [
@@ -191,22 +181,35 @@
           restricted: true,
         },
         {
-          icon: $globals.icons.categories,
-          to: `/g/${groupSlug.value}/recipes/categories`,
-          title: i18n.tc("sidebar.categories"),
+          icon: $globals.icons.book,
+          to: `/g/${groupSlug.value}/cookbooks`,
+          title: i18n.tc("cookbook.cookbooks"),
           restricted: true,
         },
         {
-          icon: $globals.icons.tags,
-          to: `/g/${groupSlug.value}/recipes/tags`,
-          title: i18n.tc("sidebar.tags"),
-          restricted: true,
-        },
-        {
-          icon: $globals.icons.potSteam,
-          to: `/g/${groupSlug.value}/recipes/tools`,
-          title: i18n.tc("tool.tools"),
+          icon: $globals.icons.organizers,
+          title: "Organizers",
           restricted: true,
+          children: [
+            {
+              icon: $globals.icons.categories,
+              to: `/g/${groupSlug.value}/recipes/categories`,
+              title: i18n.tc("sidebar.categories"),
+              restricted: true,
+            },
+            {
+              icon: $globals.icons.tags,
+              to: `/g/${groupSlug.value}/recipes/tags`,
+              title: i18n.tc("sidebar.tags"),
+              restricted: true,
+            },
+            {
+              icon: $globals.icons.potSteam,
+              to: `/g/${groupSlug.value}/recipes/tools`,
+              title: i18n.tc("tool.tools"),
+              restricted: true,
+            },
+          ],
         },
       ]);
 

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -39,13 +39,12 @@
                 <v-list-item-title>{{ nav.title }}</v-list-item-title>
               </template>
 
-              <v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to">
+              <v-list-item v-for="child in nav.children" :key="child.title" exact :to="child.to" class="ml-2">
                 <v-list-item-icon>
                   <v-icon>{{ child.icon }}</v-icon>
                 </v-list-item-icon>
                 <v-list-item-title>{{ child.title }}</v-list-item-title>
               </v-list-item>
-              <v-divider class="mb-4"></v-divider>
             </v-list-group>
 
             <!-- Single Item -->
@@ -68,18 +67,8 @@
     </template>
 
     <!-- Secondary Links -->
-    <template v-if="secondaryLinks">
-      <router-link v-if="secondaryHeader && secondaryHeaderLink" :to="secondaryHeaderLink" style="text-decoration: none;">
-        <v-subheader :to="secondaryHeaderLink" class="pb-0">
-          {{ secondaryHeader }}
-        </v-subheader>
-      </router-link>
-      <div v-else-if="secondaryHeader">
-        <v-subheader :to="secondaryHeaderLink" class="pb-0">
-          {{ secondaryHeader }}
-        </v-subheader>
-      </div>
-      <v-divider v-if="secondaryHeader"></v-divider>
+    <template v-if="secondaryLinks.length > 0">
+      <v-divider class="mt-2"></v-divider>
       <v-list nav dense exact>
         <template v-for="nav in secondaryLinks">
           <div v-if="!nav.restricted || isOwnGroup" :key="nav.title">
@@ -179,14 +168,6 @@ export default defineComponent({
       required: false,
       default: null,
     },
-    secondaryHeader: {
-      type: String,
-      default: null,
-    },
-    secondaryHeaderLink: {
-      type: String,
-      default: null,
-    },
   },
   setup(props, context) {
     // V-Model Support

frontend/lib/icons/icons.ts

@@ -146,6 +146,8 @@ import {
   mdiFlipVertical,
   mdiRotateLeft,
   mdiRotateRight,
+  mdiBookOpenPageVariant,
+  mdiFileCabinet,
 } from "@mdi/js";
 
 export const icons = {
@@ -293,6 +295,8 @@ export const icons = {
   tagArrowUp: mdiTagArrowUpOutline,
   categories: mdiShapeOutline,
   pages: mdiBookOutline,
+  book: mdiBookOpenPageVariant,
+  organizers: mdiFileCabinet,
 
   // Admin
   user: mdiAccount,