Sidebar

Candidate

Sidebar organise la navigation principale d’un portail produit. Elle est deployee par defaut et peut etre repliee pour liberer de l’espace horizontal sans retirer les destinations.

Visual example

Le bouton du header alterne les deux modes. En collapsed, chaque destination affiche un tooltip au survol et au focus clavier.

Variants

Variant	Role
Expanded	Mode par defaut avec marque, icones et libelles
Collapsed	Marque compacte et icones seules avec tooltips
Active item	Destination correspondant a la page courante

La V1 ne gere pas encore les sous-niveaux, sections repliables ou le drawer mobile. Ces comportements doivent etre definis avec les portails produits avant extension.

States

default conserve une navigation calme et lisible.
hover renforce la surface et la couleur du libelle.
focus-visible affiche un outline sans deplacer l’item.
active utilise aria-current="page" et une emphase persistante.
collapsed masque les libelles visuels mais conserve les noms accessibles.

Astro

---
import Sidebar from '../components/ui/Sidebar.astro';
import { productLogos } from '../data/brand/logos';

const items = [
  { label: 'Segments', href: '/segments', icon: 'database', active: true },
  { label: 'Search', href: '/search', icon: 'search' },
  { label: 'Settings', href: '/settings', icon: 'settings' },
];

const product = productLogos.audience;
---

<Sidebar
  items={items}
  label="Navigation Audience"
  brandName={product.name}
  brandLogo={product.assets.logo.horizontal.fullColor.onLight}
  brandSymbol={product.assets.symbol.fullColor.onLight}
/>

Audience est utilise par defaut. Fournir brandName, brandLogo et brandSymbol pour un autre produit. Utiliser collapsed uniquement pour choisir l’etat initial ; expanded reste la valeur par defaut.

HTML structure

<pixel-sidebar class="pixel-sidebar">
  <aside aria-label="Navigation Audience">
    <header>
      <img src="audience-horizontal.svg" alt="Audience by Sirdata" />
      <img src="audience-symbol.svg" alt="Audience" />
      <!-- Collapse button -->
    </header>
    <nav>
      <ul>
        <li>
          <a href="/segments" aria-current="page" aria-label="Segments">
            <span aria-hidden="true">database</span>
            <span>Segments</span>
            <span role="tooltip">Segments</span>
          </a>
        </li>
      </ul>
    </nav>
  </aside>
</pixel-sidebar>

Tokens

--sidebar-bg, --sidebar-border, --sidebar-width-*, --sidebar-padding-*, --sidebar-item-*, --sidebar-icon-size, --sidebar-toggle-*, --sidebar-focus-ring, --sidebar-tooltip-*, --sidebar-section-gap.

Do / Don’t

Do	Don’t
Garder expanded comme mode initial.	Forcer collapsed sans benefice d’espace clair.
Utiliser une icone stable par destination.	Changer d’icone selon la page ou le contexte.
Fournir les versions complete et compacte du logo.	Reduire le wordmark complet jusqu’a le rendre illisible.
Limiter la navigation a un niveau dans la V1.	Simuler une hierarchie avec des indentations arbitraires.
Marquer une seule page avec `aria-current`.	Utiliser l’etat actif uniquement comme decoration.

Accessibility

La Sidebar utilise aside, nav, une liste et des liens natifs. Le bouton expose son etat avec aria-expanded. En collapsed, les liens conservent un aria-label et les tooltips apparaissent aussi au focus clavier. La navigation doit rester utilisable avec Tab sans dependre du survol.