Le header est l’élément le plus complexe d’une interface : il doit rester statique tout en étant flexible, et loger des éléments disparates (logo, navigation, indicateurs d’état) sans jamais faillir sur le centrage.

La Magie du Centrage Vertical

Dans notre implémentation de SemanticHeader.astro, nous avons utilisé une approche basée sur des variables et une structure Flexbox rigoureuse.

:root {
  --header-height: 64px;
}

.header-inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; /* Centrage vertical parfait de tous les enfants */
}

L’astuce consiste à fixer la hauteur du header et à utiliser align-items: center. Cela garantit que, peu importe la taille du texte du logo ou des boutons de navigation, ils partagent tous le même axe central.

Alignement des Boutons de Navigation

Pour que les liens de navigation (.nav-link) et l’indicateur de statut (.status-indicator) aient une cohérence visuelle, nous leur avons assigné une hauteur identique, indépendamment de leur contenu.

.nav-link, .status-indicator {
  height: 32px; /* Hauteur fixe pour uniformiser l'UI */
  display: flex;
  align-items: center;
  padding: 0 12px;
}

Le Défi de la Navbar Responsive

Le passage du mode desktop au mode mobile ne doit pas simplement “cacher” des éléments. Nous utilisons une mobile-drawer (tiroir) qui s’anime sur l’axe X.

  1. Isolation : Le tiroir est en position: fixed, sortant du flux normal du document pour éviter d’affecter le scroll du reste de la page.
  2. Performance : L’usage de transform: translateX(100%) permet une animation fluide gérée par le GPU.
  3. Interaction : Un script minimaliste bascule l’attribut aria-expanded pour déclencher les transitions CSS.

Pourquoi ne pas utiliser Grid ?

Si CSS Grid est excellent pour les mises en page globales, Flexbox reste le roi pour les alignements unidimensionnels comme un header. Il offre une gestion plus naturelle de l’espace entre les éléments via gap et justify-content, ce qui est idéal pour une barre d’outils ou une barre de navigation.

En combinant ces techniques, nous obtenons un header qui non seulement “rend bien”, mais qui est aussi robuste face aux variations de contenu et de taille d’écran.

STATUT : LAYOUT_DÉPLOYÉ