nav-carte/components/NavEchelles.vue

<!--
  NavEchelles — B10-M2
  Barre des trois échelles S / M / XL, lue depuis utils/echelles.ts (source unique).
  ≥ 1280 px : les trois groupes ; 768-1279 px : le seul groupe de la page courante ;
  < 768 px : rien (FilEchelle + NavTiroir prennent le relais).
  Chaque groupe = <ul> étiqueté par son accroche (pastille + titre de l'échelle).
-->
<template>
  <nav class="nav-echelles" aria-label="Échelles">
    <div
      v-for="id in ORDRE_ECHELLES"
      :key="id"
      class="nav-echelles__grp"
      :class="{ 'nav-echelles__grp--courant': courant?.echelle === id }"
    >
      <span :id="`nav-echelle-${id}`" class="nav-echelles__kick">
        <span class="nav-echelles__pastille">{{ id }}</span>{{ ECHELLES[id].titre }}
      </span>
      <ul class="nav-echelles__tabs" :aria-labelledby="`nav-echelle-${id}`">
        <li v-for="o in ECHELLES[id].onglets" :key="o.to">
          <NuxtLink
            :to="o.to"
            class="nav-echelles__tab"
            :class="{ 'nav-echelles__tab--actif': o.actif(route) }"
            :aria-current="o.actif(route) ? 'page' : undefined"
          >{{ o.libelle }}</NuxtLink>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ECHELLES, ORDRE_ECHELLES, echelleDeRoute } from '~/utils/echelles'

const route = useRoute()
const courant = computed(() => echelleDeRoute(route))
</script>

<style scoped>
.nav-echelles {
  display: none;
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--space-lg);
}

.nav-echelles__grp {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.nav-echelles__kick {
  padding: 0 var(--space-xs);
  font-size: 0.66rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.nav-echelles__grp--courant .nav-echelles__kick {
  color: var(--text);
}

.nav-echelles__pastille {
  display: inline-block;
  margin-right: 5px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--fw-bold);
}

.nav-echelles__tabs {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-echelles__tab {
  display: inline-block;
  padding: 4px 9px 9px;
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-echelles__tab:hover {
  color: var(--text);
}

.nav-echelles__tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.nav-echelles__tab--actif {
  color: var(--text);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--nav-primary-solid);
}

/* 768-1279 : le seul groupe courant, aligné à gauche après le logo */
@media (min-width: 768px) {
  .nav-echelles {
    display: flex;
    justify-content: flex-start;
  }
  .nav-echelles__grp--courant {
    display: flex;
  }
}

/* ≥ 1280 : les trois groupes, centrés, séparés par un filet */
@media (min-width: 1280px) {
  .nav-echelles {
    justify-content: center;
  }
  .nav-echelles__grp {
    display: flex;
  }
  .nav-echelles__grp + .nav-echelles__grp::before {
    content: "";
    position: absolute;
    left: calc(var(--space-lg) / -2);
    top: 10px;
    bottom: 10px;
    border-left: 1px solid var(--border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-echelles__tab { transition: none; }
}
</style>