58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@/components/ui/breadcrumb';
|
|
import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
|
|
type Props = {
|
|
breadcrumbs: BreadcrumbItemType[];
|
|
};
|
|
|
|
defineProps<Props>();
|
|
const { t } = useLocalization();
|
|
</script>
|
|
|
|
<template>
|
|
<Breadcrumb class="min-w-0" :aria-label="t('navigation.breadcrumbs')">
|
|
<BreadcrumbList class="flex-nowrap">
|
|
<template v-for="(item, index) in breadcrumbs" :key="index">
|
|
<BreadcrumbItem
|
|
:class="[
|
|
'min-w-0',
|
|
index !== breadcrumbs.length - 1
|
|
? 'hidden md:inline-flex'
|
|
: '',
|
|
]"
|
|
>
|
|
<template v-if="index === breadcrumbs.length - 1">
|
|
<BreadcrumbPage class="truncate" :title="item.title">{{
|
|
item.title
|
|
}}</BreadcrumbPage>
|
|
</template>
|
|
<template v-else>
|
|
<BreadcrumbLink as-child>
|
|
<Link
|
|
:href="item.href"
|
|
class="max-w-40 truncate"
|
|
:title="item.title"
|
|
>{{ item.title }}</Link
|
|
>
|
|
</BreadcrumbLink>
|
|
</template>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator
|
|
v-if="index !== breadcrumbs.length - 1"
|
|
class="hidden md:block"
|
|
/>
|
|
</template>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</template>
|