sidebar + basic layout

layouts/default.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Separator } from '@/components/ui/separator';
+import {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+</script>
+
+<template>
+    <SidebarProvider>
+        <AppSidebar />
+        <main>
+            <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>
+                            <BreadcrumbItem class="hidden md:block">
+                                <BreadcrumbLink href="#">
+                                    Bread
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                            <BreadcrumbSeparator class="hidden md:block" />
+                            <BreadcrumbItem>
+                                <BreadcrumbPage>Crumb</BreadcrumbPage>
+                            </BreadcrumbItem>
+                        </BreadcrumbList>
+                    </Breadcrumb>
+                </div>
+            </header>
+
+            <div class="flex flex-1 flex-col p-4 pt-0">
+                <slot />
+            </div>
+        </main>
+    </SidebarProvider>
+</template>