70 lines
2.2 KiB
Vue
70 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
|
|
interface BreadcrumbItem {
|
|
name: string;
|
|
path: string;
|
|
}
|
|
|
|
const breadcrumbs = computed<BreadcrumbItem[]>(() => {
|
|
const items: BreadcrumbItem[] = [
|
|
{ name: 'Home', path: '/' }
|
|
];
|
|
|
|
// Map route names to breadcrumb labels
|
|
const routeLabels: Record<string, string> = {
|
|
'blog-overview': 'Blog',
|
|
'blog-detail': 'Blog',
|
|
'about': 'About Us',
|
|
'contact': 'Contact',
|
|
'privacy-policy': 'Privacy Policy'
|
|
};
|
|
|
|
if (route.name && route.name !== 'home') {
|
|
const routeName = route.name.toString();
|
|
|
|
if (routeName === 'blog-detail') {
|
|
// For blog detail pages, add Blog first, then the post title
|
|
items.push({ name: 'Blog', path: '/blog' });
|
|
|
|
// Get the post title from route meta or params if available
|
|
const postTitle = route.meta.title as string || 'Article';
|
|
items.push({ name: postTitle, path: route.path });
|
|
} else if (routeLabels[routeName]) {
|
|
items.push({ name: routeLabels[routeName], path: route.path });
|
|
}
|
|
}
|
|
|
|
return items;
|
|
});
|
|
|
|
const shouldShowBreadcrumbs = computed(() => {
|
|
return breadcrumbs.value.length > 1 && route.name !== 'home';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<nav v-if="shouldShowBreadcrumbs" aria-label="Breadcrumb" class="mb-4">
|
|
<ol class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
|
|
<li v-for="(item, index) in breadcrumbs" :key="item.path" class="flex items-center gap-2">
|
|
<RouterLink
|
|
v-if="index < breadcrumbs.length - 1"
|
|
:to="item.path"
|
|
class="hover:text-gray-900 dark:hover:text-white transition-colors"
|
|
:aria-label="`Navigate to ${item.name}`"
|
|
>
|
|
{{ item.name }}
|
|
</RouterLink>
|
|
<span v-else class="font-medium text-gray-900 dark:text-white" aria-current="page">
|
|
{{ item.name }}
|
|
</span>
|
|
<i v-if="index < breadcrumbs.length - 1" class="fas fa-chevron-right text-xs text-gray-400"></i>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</template>
|