Code formatting

frontend/layouts/default.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import AppSidebar from '@/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import { Separator } from '@/components/ui/separator'
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+
+const route = useRoute()
+
+const breadcrumbs = computed(() => {
+  const paths = route.path.split('/').filter(Boolean)
+  return paths.map((path, index) => ({
+    name: path.charAt(0).toUpperCase() + path.slice(1),
+    path: '/' + paths.slice(0, index + 1).join('/'),
+    isLast: index === paths.length - 1,
+  }))
+})
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header
+        class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
+      >
+        <div class="flex items-center gap-2 px-4">
+          <SidebarTrigger class="-ml-1" />
+          <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink as-child>
+                  <NuxtLink to="/">Home</NuxtLink>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <template v-if="breadcrumbs.length > 0">
+                <BreadcrumbSeparator />
+                <template v-for="(crumb, index) in breadcrumbs" :key="crumb.path">
+                  <BreadcrumbItem>
+                    <BreadcrumbPage v-if="crumb.isLast">
+                      {{ crumb.name }}
+                    </BreadcrumbPage>
+                    <BreadcrumbLink v-else as-child>
+                      <NuxtLink :to="crumb.path">{{ crumb.name }}</NuxtLink>
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator v-if="!crumb.isLast" />
+                </template>
+              </template>
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+        <slot />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>