[Closes #10] Reactive breadcrumbs

app/layouts/Default.vue

@@ -1,18 +1,11 @@
 <script setup lang="ts">
 import { useAuthStore } from "~/stores/auth";
+
 import DefaultSidebar from "~/layouts/default/Sidebar.vue";
+import DefaultBreadcrumb from "~/layouts/default/Breadcrumb.vue";
 
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar";
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "~/components/ui/breadcrumb";
-
 import { Separator } from "~/components/ui/separator";
 
 import { useRuntimeConfig } from "#app";
@@ -32,17 +25,7 @@ await authStore.init();
       <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
         <SidebarTrigger class="-ml-1" />
         <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem class="hidden md:block">
-              <BreadcrumbLink href="#"> Building Your Application </BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator class="hidden md:block" />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+        <DefaultBreadcrumb />
       </header>
       <main class="flex flex-1 flex-col gap-4 p-4">
         <slot />

app/layouts/default/Breadcrumb.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+
+import { useBreadcrumbStore } from "~/stores/breadcrumbs";
+const breadcrumbStore = useBreadcrumbStore();
+</script>
+
+<template>
+  <ClientOnly>
+    <Breadcrumb>
+      <BreadcrumbList>
+        <template v-for="i in breadcrumbStore.items.length - 1" :key="i">
+          <BreadcrumbItem class="hidden md:block">
+            <BreadcrumbLink :href="breadcrumbStore.items[i - 1]?.to || ''">
+              {{ breadcrumbStore.items[i - 1]?.label }}
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator class="hidden md:block" />
+        </template>
+        <BreadcrumbItem>
+          <BreadcrumbPage>
+            {{ breadcrumbStore.items[breadcrumbStore.items.length - 1]?.label }}
+          </BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  </ClientOnly>
+</template>

app/layouts/default/SidebarFooter.vue

@@ -29,11 +29,11 @@ const userInititials = computed(() => {
 });
 
 const handleLogout = () => {
-  navigateTo("/member/auth/logout");
+  navigateTo("/auth/logout");
 };
 
 const handleLogin = () => {
-  navigateTo("/member/auth/login");
+  navigateTo("/auth/login");
 };
 </script>