generated from gitea_admin/default
118 lines
2.8 KiB
Vue
118 lines
2.8 KiB
Vue
<template>
|
||
<div v-if="items.length > 1" aria-label="Fil d’Ariane" class="breadcrumb">
|
||
<ul class="breadcrumb__list">
|
||
<li v-for="(item, i) in items" :key="item.to" class="breadcrumb__item">
|
||
<NuxtLink v-if="i < items.length - 1" :to="item.to">
|
||
<img
|
||
v-if="i === 0"
|
||
src="/img/icones/house-grey.svg"
|
||
alt="Accueil"
|
||
class="breadcrumb__home-icon"
|
||
/>
|
||
<span v-else>{{ item.label }}</span>
|
||
</NuxtLink>
|
||
<span v-else aria-current="page">{{ item.label }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const props = defineProps({
|
||
currentLabel: { type: String, default: '' } // utile pour les pages dynamiques
|
||
})
|
||
|
||
const route = useRoute()
|
||
|
||
const labelMap = {
|
||
concerts: 'Concerts',
|
||
agenda: 'Agenda',
|
||
saison: 'Saison',
|
||
orchestre: "L'Orchestre",
|
||
professionnels: "Professionnels"
|
||
}
|
||
|
||
function humanize(segment) {
|
||
return segment
|
||
.replace(/-/g, ' ')
|
||
.replace(/\b\w/g, (m) => m.toUpperCase())
|
||
}
|
||
|
||
const items = computed(() => {
|
||
const parts = route.path.split('/').filter(Boolean)
|
||
const crumbs = [{ to: '/', label: 'Accueil' }]
|
||
|
||
let acc = ''
|
||
parts.forEach((part, index) => {
|
||
acc += `/${part}`
|
||
const isLast = index === parts.length - 1
|
||
const label = isLast && props.currentLabel
|
||
? props.currentLabel
|
||
: (labelMap[part] || humanize(decodeURIComponent(part)))
|
||
|
||
crumbs.push({ to: acc, label })
|
||
})
|
||
|
||
return crumbs
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.breadcrumb {
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
font-size: 15px;
|
||
font-family: var(--font-roboto);
|
||
font-weight: var(--fw-extralight);
|
||
color: #6D798A;
|
||
position: relative;
|
||
z-index: 1;
|
||
@media (min-width: 0px) {
|
||
padding-left: 20px;
|
||
}
|
||
@media (min-width: 600px) {
|
||
padding-left: 20px;
|
||
}
|
||
@media (min-width: 700px) {
|
||
padding-left: 20px;
|
||
}
|
||
}
|
||
.breadcrumb__list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
.breadcrumb__item { display: inline-flex; align-items: center; }
|
||
.breadcrumb a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
pointer-events: auto;
|
||
}
|
||
.breadcrumb__item:not(:last-child)::after {
|
||
content: "";
|
||
display: inline-block;
|
||
width: 11px;
|
||
height: 11px;
|
||
margin-left: 8px;
|
||
background: url('/img/icones/angle-right-grey.svg') no-repeat center / contain;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
top: -1px; /* ajuste entre 0 et 2px selon ton rendu */
|
||
pointer-events: none;
|
||
}
|
||
.breadcrumb__home-icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
|
||
|
||
|
||
</style>
|