feat(kitchen sink / inbox): adjust aside menus

gitsindonesia · Jun 19, 2023 · 942214e · 942214e
1 parent ddd0e34
commit 942214e
Showing 1 changed file with 44 additions and 4 deletions.
diff --git a/starter/kitchen-sink/components/inbox/Aside.vue b/starter/kitchen-sink/components/inbox/Aside.vue
@@ -1,5 +1,28 @@
 <script setup lang="ts">
 const inboxDrawer = useInboxDrawer();
+
+const menus = [
+  {
+    text: "Mail",
+    icon: "ri:mail-line",
+    to: "/inbox",
+  },
+  {
+    text: "Chat",
+    icon: "ri:message-line",
+    to: "/inbox/chat",
+  },
+  {
+    text: "Spaces",
+    icon: "ri:user-line",
+    to: "/inbox/spaces",
+  },
+  {
+    text: "Meet",
+    icon: "ri:video-line",
+    to: "/inbox/meet",
+  },
+];
 </script>
 
 <template>
@@ -10,11 +33,28 @@ const inboxDrawer = useInboxDrawer();
     :class="{
       '!bg-gray-blue-50': $colorMode.preference === 'light',
     }"
+    :style="{
+      '--nav-drawer-mini-width': '72px',
+    }"
   >
     <VBtn prefix-icon="ri:menu-line" fab icon @click="inboxDrawer = !inboxDrawer" />
-    <VBtn prefix-icon="ri:mail-line" fab icon text class="mt-4" />
-    <VBtn prefix-icon="ri:message-line" fab icon text />
-    <VBtn prefix-icon="ri:user-line" fab icon text />
-    <VBtn prefix-icon="ri:video-line" fab icon text />
+
+    <ul class="flex gap-4 flex-col items-center mt-3">
+      <li
+        v-for="menu in menus"
+        :key="menu.text"
+        v-tooltip="{
+          content: menu.text,
+          placement: 'right',
+          theme: 'tooltip-black',
+          triggers: ['hover', 'focus'],
+          offset: [0, 8],
+        }"
+        class="w-full flex flex-col items-center cursor-pointer"
+      >
+        <VBtn fab icon text :to="menu.to" :prefix-icon="menu.icon" size="sm" rounded />
+        <p class="text-xs text-center">{{ menu.text }}</p>
+      </li>
+    </ul>
   </VNavDrawer>
 </template>