Concerts

app/components/Breadcrumb.vue

@@ -0,0 +1,117 @@
+<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>