versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Add breadcrumb navigation to every page

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-04 15:17:47 +01:00
parent 6934a5758e
commit 232abac215
No known key found for this signature in database
15 changed files with 119 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/sidebars/sidebar.vue
View file

@ -18,6 +18,8 @@ import LeftSidebar from "./left-sidebar.vue";
import RightSidebar from "./right-sidebar.vue";
const showRightSidebar = useSetting(SettingIds.NotificationsSidebar);
const route = useRoute();
</script>
<template>
@ -29,17 +31,17 @@ const showRightSidebar = useSetting(SettingIds.NotificationsSidebar);
<div class="flex items-center gap-2 px-4">
<SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" />
<Breadcrumb>
<Breadcrumb v-if="route.meta.breadcrumbs">
<BreadcrumbList>
<BreadcrumbItem class="hidden md:block">
<BreadcrumbLink href="#">
Timelines
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator class="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>Home</BreadcrumbPage>
</BreadcrumbItem>
<template v-for="(breadcrumb, index) of route.meta.breadcrumbs">
<BreadcrumbItem class="hidden md:block">
<component :is="breadcrumb.href ? BreadcrumbLink : BreadcrumbPage" :href="breadcrumb.href">
{{ breadcrumb.text }}
</component>
</BreadcrumbItem>
<BreadcrumbSeparator v-if="index !== (route.meta.breadcrumbs.length - 1)"
class="hidden md:block" />
</template>
</BreadcrumbList>
</Breadcrumb>
</div>

3
components/ui/breadcrumb/BreadcrumbLink.vue
View file

@ -2,11 +2,12 @@
import { cn } from "@/lib/utils";
import { Primitive, type PrimitiveProps } from "radix-vue";
import type { HTMLAttributes } from "vue";
import { NuxtLink } from "#components";
const props = withDefaults(
defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(),
{
as: "a",
as: NuxtLink,
},
);
</script>