create frontend directory

2025-07-11 23:55:46 +02:00
parent c281b9a673
commit dba7a8b0e8
110 changed files with 0 additions and 0 deletions
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Separator } from '@/components/ui/separator';
+import {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+const route = useRoute();
+
+const breadcrumbs = computed(() => getBreadcrumbs(route.path));
+</script>
+
+<template>
+    <SidebarProvider>
+        <AppSidebar />
+        <main class="w-full grow">
+            <header
+                class="h-16 flex items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
+            >
+                <div class="items-center flex gap-2 px-4">
+                    <SidebarTrigger class="[&_svg]:size-4" />
+                    <Separator orientation="vertical" class="mr-2 !h-4" />
+                    <Breadcrumb>
+                        <BreadcrumbList>
+                            <template
+                                v-for="(crumb, i) in breadcrumbs"
+                                :key="i"
+                            >
+                                <BreadcrumbItem>
+                                    <NuxtLink
+                                        v-if="i < breadcrumbs.length - 1"
+                                        :to="crumb.href"
+                                        as-child
+                                    >
+                                        <BreadcrumbLink>
+                                            {{ crumb.name }}
+                                        </BreadcrumbLink>
+                                    </NuxtLink>
+                                    <BreadcrumbPage v-else>{{
+                                        crumb.name
+                                    }}</BreadcrumbPage>
+                                </BreadcrumbItem>
+                                <BreadcrumbSeparator
+                                    v-if="i < breadcrumbs.length - 1"
+                                    class="hidden md:block"
+                                />
+                            </template>
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                </div>
+            </header>
+
+            <div class="flex flex-1 flex-col p-4 pt-0">
+                <slot />
+            </div>
+        </main>
+    </SidebarProvider>
+</template>