61 lines
1.9 KiB
Vue
61 lines
1.9 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: '/' }];
|
|
|
|
const routeLabels: Record<string, string> = {
|
|
'blog-overview': 'Blog',
|
|
'blog-detail': 'Blog',
|
|
about: 'About Us',
|
|
contact: 'Contact',
|
|
'privacy-policy': 'Privacy Policy',
|
|
faq: 'FAQ',
|
|
};
|
|
|
|
if (route.name && route.name !== 'home') {
|
|
const routeName = route.name.toString();
|
|
|
|
if (routeName === 'blog-detail') {
|
|
items.push({ name: 'Blog', path: '/blog' });
|
|
|
|
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>
|