Side Navigation (Navigation latérale) ​

Barre de navigation verticale pour les applications b.connect à architecture multi-sections.

Note CSS : L'état actif (trait gradient gauche) est défini dans TOKEN-001. Si l'item actif s'affiche avec un fond rouge/rose plein, voir P1-02 TOKEN-001.

Démo ​

État actif — Règle CSS ​

L'item actif se distingue par deux propriétés uniquement :

1. border-left: 2px solid avec gradient rouge-orange
2. background: var(--bc-raised) — fond gris très léger

/* À définir dans .vitepress/theme/custom.css */
.bc-side-nav__item.is-active {
  background: var(--bc-raised, #f4f5f7);
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, #e8294c, #f97316) 1;
  padding-left: calc(var(--item-padding, 16px) - 2px);
}

Ne jamais utiliser de fond coloré rose/rouge sur l'état actif — c'est le bug TOKEN-001.

Structure recommandée ​

<nav class="bc-side-nav">
  <div v-for="group in navGroups" :key="group.label">
    <p v-if="group.label" class="bc-side-nav__group-label">{{ group.label }}</p>
    <a
      v-for="item in group.items"
      :key="item.path"
      :href="item.path"
      :class="['bc-side-nav__item', { 'is-active': $route.path === item.path }]"
    >
      <i :class="`bi bi-${item.icon}`" />
      {{ item.label }}
    </a>
  </div>
</nav>