GF-12-breadcrumbs #11

Manually merged
liviu merged 8 commits from GF-12-breadcrumbs into production 2026-01-12 14:31:25 +01:00
2 changed files with 27 additions and 20 deletions
Showing only changes of commit 7b1ce9cb23 - Show all commits

View file

@ -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 />

View 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>