SPB Git forge
spboucher.ai ↗

spb/ka-ui

Public
30commits 1branches 0releases
145.7 MBsize
maindefault branch
27 days agolast push
Python 33.5% JavaScript 30.1% TypeScript 25% CSS 10% Shell 1.4%
2.6 KB
View source Raw Blame History

# Standard KA Nav v2 — menu mobile plein écran (2026-08-25)

# Problème corrigé

Sur mobile, plusieurs sites KA affichaient soit des liens de nav qui wrappent dans le header (2-3 lignes), soit un dropdown position:absolute ancré au header. Quand le header n'est pas sticky (ou que le panneau est ancré au flux du document), ouvrir le menu en bas de page ne montre RIEN — le panneau se dessine hors écran. Rendu incohérent d'un site à l'autre.

# Standard (obligatoire sur tous les sites publics KA)

  • Desktop (>760px) : nav pilules inline inchangée.
  • Mobile (≤760px) : les liens inline sont masqués, remplacés par un bouton hamburger 44×44 (3 barres → ✕ animé, aria-expanded).
  • Panneau : position:fixed; inset:0; z-index:var(--z-modal,900); background:var(--paper) → TOUJOURS visible, peu importe la position de scroll (c'est le fix du bug). Structure : barre du haut (marque + bouton ✕ 44px) / liens géants numérotés (font-display 700, min-height 52px, bordure pointillée) / pied (badge Groupe KA + liens secondaires), padding-bottom:max(20px, env(safe-area-inset-bottom)).
  • Verrou de scroll : classe ka-menu-locked sur <html> (overflow:hidden).
  • Fermeture : clic sur un lien, ✕, touche Escape. Le panneau s'ouvre sans animation lourde (fade+translate 160ms max).
  • A11y : role="dialog" aria-modal="true", aria-label="Menu", focus visible.
  • Thème automatique par app via tokens : --paper, --ink, --ink-2, --ink-3, --accent, --on-accent, --accent-soft, --font-display, --font-mono, --z-modal.
  • Référence Next.js : vrai-prix src/components/HeaderNav.tsx (checkbox + peer-checked).
  • Référence vanilla SPA : ka-nav.css + ka-nav.js de ce dossier (copiés/adaptés dans chaque index.html monolithique).

# Règles

  • JAMAIS de dropdown position:absolute ancré au header pour le menu mobile.
  • Le ✕ de fermeture DOIT vivre DANS le panneau (barre interne ou bouton position:fixed en haut à droite), jamais uniquement dans le header : si le header n'est pas épinglé (bas de page, sticky cassé par un ancêtre overflow), le burger→✕ défile hors écran alors que le panneau fixed reste affiché (bug corrigé le 2026-08-25 sur les 6 apps React + trouve-ka : .mm-close fixed + burger visibility:hidden à l'ouverture — une seule commande).
  • Le hamburger et le ✕ font ≥44×44px (cible tactile).
  • Les liens du panneau reprennent EXACTEMENT les liens de la nav desktop (+ liens secondaires du footer si pertinent), i18n fr-CA.
  • L'état actif (page courante) est marqué dans le panneau (fond --ink, texte --accent ou inversion propre au thème).