✨ Setup drive dashboard

DysonNetwork.Drive/Client/src/layouts/dashboard.vue

@@ -0,0 +1,42 @@
+<template>
+  <n-layout has-sider class="h-full">
+    <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240" show-trigger>
+      <n-menu
+        :collapsed-width="64"
+        :collapsed-icon-size="22"
+        :options="menuOptions"
+        :value="route.name as string"
+        @update:value="updateMenuSelect"
+      />
+    </n-layout-sider>
+    <n-layout>
+      <router-view />
+    </n-layout>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { DataUsageRound } from '@vicons/material'
+import { NIcon, NLayout, NLayoutSider, NMenu, type MenuOption } from 'naive-ui'
+import { h, type Component } from 'vue'
+import { RouterView, useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+function renderIcon(icon: Component) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+const menuOptions: MenuOption[] = [
+  {
+    label: 'Usage',
+    key: 'dashboardUsage',
+    icon: renderIcon(DataUsageRound),
+  },
+]
+
+function updateMenuSelect(key: string) {
+  router.push({ name: key })
+}
+</script>

DysonNetwork.Drive/Client/src/layouts/default.vue

@@ -15,7 +15,7 @@
         </n-dropdown>
       </div>
     </n-layout-header>
-    <n-layout-content embedded content-style="padding: 24px;">
+    <n-layout-content embedded>
       <router-view />
     </n-layout-content>
   </n-layout>
@@ -28,12 +28,15 @@ import {
   LogInOutlined,
   PersonAddAlt1Outlined,
   PersonOutlineRound,
+  DataUsageRound,
 } from '@vicons/material'
 import { useUserStore } from '@/stores/user'
 import { useRoute, useRouter } from 'vue-router'
 import { useServicesStore } from '@/stores/services'
 
 const userStore = useUserStore()
+
+const router = useRouter()
 const route = useRoute()
 
 const hideUserMenu = computed(() => {
@@ -60,6 +63,14 @@ const guestOptions = [
 ]
 
 const userOptions = computed(() => [
+  {
+    label: 'Usage',
+    key: 'dashboardUsage',
+    icon: () =>
+      h(NIcon, null, {
+        default: () => h(DataUsageRound),
+      }),
+  },
   {
     label: 'Profile',
     key: 'profile',
@@ -67,7 +78,7 @@ const userOptions = computed(() => [
       h(NIcon, null, {
         default: () => h(PersonOutlineRound),
       }),
-  }
+  },
 ])
 
 const servicesStore = useServicesStore()
@@ -83,6 +94,8 @@ function handleGuestMenuSelect(key: string) {
 function handleUserMenuSelect(key: string) {
   if (key === 'profile') {
     window.open(servicesStore.getSerivceUrl('DysonNetwork.Pass', 'accounts/me')!, '_blank')
+  } else {
+    router.push({ name: key })
   }
 }
 </script>