Inventory/frontend/app/components/layout/AppBreadcrumb.vue

<template>
  <nav v-if="crumbs.length > 1" class="container mx-auto px-6 pt-4" aria-label="Fil d'Ariane">
    <div class="text-sm breadcrumbs py-0">
      <ul>
        <!-- First crumb (always visible) -->
        <li>
          <NuxtLink :to="crumbs[0].path" class="text-base-content/60 hover:text-primary transition-colors">
            {{ crumbs[0].label }}
          </NuxtLink>
        </li>
        <!-- Ellipsis on mobile when there are middle crumbs -->
        <li v-if="crumbs.length > 2" class="sm:hidden">
          <span class="text-base-content/40">…</span>
        </li>
        <!-- Middle crumbs: hidden on mobile, visible sm+ -->
        <li
          v-for="(crumb, i) in crumbs.slice(1, crumbs.length - 1)"
          :key="i"
          class="hidden sm:list-item"
        >
          <NuxtLink :to="crumb.path" class="text-base-content/60 hover:text-primary transition-colors">
            {{ crumb.label }}
          </NuxtLink>
        </li>
        <!-- Last crumb (always visible, current page) -->
        <li v-if="crumbs.length > 1">
          <span class="text-base-content font-medium">{{ crumbs[crumbs.length - 1].label }}</span>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script setup lang="ts">
interface Crumb {
  label: string
  path: string
}

const route = useRoute()

const crumbs = computed<Crumb[]>(() => {
  const result: Crumb[] = [{ label: 'Accueil', path: '/' }]
  const path = route.path

  // Home page — no breadcrumb
  if (path === '/') return []

  // Machine context from query param (when navigating from a machine detail page)
  if (route.query.from === 'machine' && route.query.machineId) {
    result.push({ label: 'Parc machines', path: '/machines' })
    result.push({ label: 'Machine', path: `/machine/${route.query.machineId}` })
  }

  // Machines
  if (path === '/machines') {
    result.push({ label: 'Parc machines', path: '/machines' })
  } else if (path.startsWith('/machine/') && !route.query.from) {
    result.push({ label: 'Parc machines', path: '/machines' })
    result.push({ label: 'Machine', path })
  }

  // Catalogs
  else if (path.startsWith('/catalogues/composants') || path === '/component-catalog') {
    result.push({ label: 'Composants', path: '/catalogues/composants' })
  } else if (path.startsWith('/catalogues/pieces') || path === '/pieces-catalog') {
    result.push({ label: 'Pièces', path: '/catalogues/pieces' })
  } else if (path.startsWith('/catalogues/produits') || path === '/product-catalog') {
    result.push({ label: 'Produits', path: '/catalogues/produits' })
  }

  // Entity detail pages (when NOT from machine context)
  else if (path.startsWith('/component/') && !route.query.from) {
    result.push({ label: 'Composants', path: '/catalogues/composants' })
    result.push({ label: 'Composant', path })
  } else if (path.startsWith('/piece/') && !route.query.from) {
    result.push({ label: 'Pièces', path: '/catalogues/pieces' })
    result.push({ label: 'Pièce', path })
  } else if (path.startsWith('/product/') && !route.query.from) {
    result.push({ label: 'Produits', path: '/catalogues/produits' })
    result.push({ label: 'Produit', path })
  }

  // Entity detail pages WITH machine context — add entity as last crumb
  else if (path.startsWith('/component/') && route.query.from === 'machine') {
    result.push({ label: 'Composant', path })
  } else if (path.startsWith('/piece/') && route.query.from === 'machine') {
    result.push({ label: 'Pièce', path })
  } else if (path.startsWith('/product/') && route.query.from === 'machine') {
    result.push({ label: 'Produit', path })
  }

  // Admin pages
  else if (path.startsWith('/sites')) {
    result.push({ label: 'Sites', path: '/sites' })
  } else if (path.startsWith('/constructeurs')) {
    result.push({ label: 'Fournisseurs', path: '/constructeurs' })
  } else if (path.startsWith('/activity-log')) {
    result.push({ label: 'Journal d\'activité', path: '/activity-log' })
  } else if (path.startsWith('/admin')) {
    result.push({ label: 'Administration', path: '/admin' })
  } else if (path.startsWith('/documents')) {
    result.push({ label: 'Documents', path: '/documents' })
  } else if (path.startsWith('/comments')) {
    result.push({ label: 'Commentaires', path: '/comments' })
  }

  // Category pages
  else if (path.startsWith('/component-category')) {
    result.push({ label: 'Composants', path: '/catalogues/composants' })
    result.push({ label: 'Catégorie', path })
  } else if (path.startsWith('/piece-category')) {
    result.push({ label: 'Pièces', path: '/catalogues/pieces' })
    result.push({ label: 'Catégorie', path })
  } else if (path.startsWith('/product-category')) {
    result.push({ label: 'Produits', path: '/catalogues/produits' })
    result.push({ label: 'Catégorie', path })
  }

  // Create pages
  else if (path.startsWith('/pieces/create')) {
    result.push({ label: 'Pièces', path: '/catalogues/pieces' })
    result.push({ label: 'Nouvelle pièce', path })
  } else if (path.startsWith('/component/create')) {
    result.push({ label: 'Composants', path: '/catalogues/composants' })
    result.push({ label: 'Nouveau composant', path })
  } else if (path.startsWith('/product/create')) {
    result.push({ label: 'Produits', path: '/catalogues/produits' })
    result.push({ label: 'Nouveau produit', path })
  } else if (path === '/machines/new') {
    result.push({ label: 'Parc machines', path: '/machines' })
    result.push({ label: 'Nouvelle machine', path })
  }

  return result
})
</script>