route breadcrumbs, improve sidebar, basic folder layout

This commit is contained in:
2025-07-11 05:20:53 +02:00
parent 342b5aa554
commit c281b9a673
39 changed files with 883 additions and 29 deletions

View File

@@ -8,12 +8,15 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
const route = useRoute();
const breadcrumbs = computed(() => getBreadcrumbs(route.path));
</script>
<template>
<SidebarProvider>
<AppSidebar />
<main>
<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"
>
@@ -22,15 +25,29 @@ import {
<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>
<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>