route breadcrumbs, improve sidebar, basic folder layout
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user