feat(frontend): add layout

Author: haxgun

frontend/src/components/DashboardPage/NavStart.vue

@@ -19,7 +19,7 @@ defineProps<{
     <SidebarGroupLabel v-if="title">{{ title }}</SidebarGroupLabel>
     <SidebarMenu>
       <SidebarMenuItem>
-        <SidebarMenuButton as-child>
+        <SidebarMenuButton as-child isActive>
           <a href="#">
             <component :is="Home02" />
             <span>Introduction</span>

frontend/src/layouts/Dashboard.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import AppSidebar from '@/components/DashboardPage/AppSidebar.vue'
+import Header from '@/components/DashboardPage/Header.vue'
+import { SidebarProvider } from '@/components/ui/sidebar'
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <Header />
+    <SidebarProvider class="mt-14">
+      <AppSidebar />
+      <div class="h-dvh w-dvw">
+        <slot />
+      </div>
+    </SidebarProvider>
+  </div>
+</template>

frontend/src/views/DashboardView.vue

@@ -1,21 +1,15 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
 
-import AppSidebar from '@/components/DashboardPage/AppSidebar.vue'
-import Header from '@/components/DashboardPage/Header.vue'
-import { SidebarProvider } from '@/components/ui/sidebar'
+import Dashboard from '@/layouts/Dashboard.vue'
 
 useHead({
   title: 'Dashboard',
 })
 </script>
 
 <template>
-  <div class="flex flex-col">
-    <Header />
-    <SidebarProvider class="mt-14">
-      <AppSidebar />
-      <div class="h-dvh w-dvw"></div>
-    </SidebarProvider>
-  </div>
+  <Dashboard>
+    <RouterView />
+  </Dashboard>
 </template>