GF-12-breadcrumbs #11
2 changed files with 27 additions and 20 deletions
|
|
@ -1,18 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useAuthStore } from "~/stores/auth";
|
import { useAuthStore } from "~/stores/auth";
|
||||||
|
|
||||||
import DefaultSidebar from "~/layouts/default/Sidebar.vue";
|
import DefaultSidebar from "~/layouts/default/Sidebar.vue";
|
||||||
|
import DefaultBreadcrumb from "~/layouts/default/Breadcrumb.vue";
|
||||||
|
|
||||||
import { SidebarInset, SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar";
|
import { SidebarInset, SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar";
|
||||||
|
|
||||||
import {
|
|
||||||
Breadcrumb,
|
|
||||||
BreadcrumbItem,
|
|
||||||
BreadcrumbLink,
|
|
||||||
BreadcrumbList,
|
|
||||||
BreadcrumbPage,
|
|
||||||
BreadcrumbSeparator,
|
|
||||||
} from "~/components/ui/breadcrumb";
|
|
||||||
|
|
||||||
import { Separator } from "~/components/ui/separator";
|
import { Separator } from "~/components/ui/separator";
|
||||||
|
|
||||||
import { useRuntimeConfig } from "#app";
|
import { useRuntimeConfig } from "#app";
|
||||||
|
|
@ -32,17 +25,7 @@ await authStore.init();
|
||||||
<header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
|
<header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
|
||||||
<SidebarTrigger class="-ml-1" />
|
<SidebarTrigger class="-ml-1" />
|
||||||
<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
|
<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
|
||||||
<Breadcrumb>
|
<DefaultBreadcrumb />
|
||||||
<BreadcrumbList>
|
|
||||||
<BreadcrumbItem class="hidden md:block">
|
|
||||||
<BreadcrumbLink href="#"> Building Your Application </BreadcrumbLink>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
<BreadcrumbSeparator class="hidden md:block" />
|
|
||||||
<BreadcrumbItem>
|
|
||||||
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
|
||||||
</BreadcrumbItem>
|
|
||||||
</BreadcrumbList>
|
|
||||||
</Breadcrumb>
|
|
||||||
</header>
|
</header>
|
||||||
<main class="flex flex-1 flex-col gap-4 p-4">
|
<main class="flex flex-1 flex-col gap-4 p-4">
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
24
app/layouts/default/Breadcrumb.vue
Normal file
24
app/layouts/default/Breadcrumb.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from "~/components/ui/breadcrumb";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem class="hidden md:block">
|
||||||
|
<BreadcrumbLink href="#"> Building Your Application </BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator class="hidden md:block" />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue