Brickslab.

@brickslab/ui-web

Menu de navigation mobile qui s'affiche lorsque la sidebar est masquée (écrans <1024px). Composant personnalisé du catalogue avec navigation complète et système d'overlay semi-transparent.

Aperçu

Cliquez sur le bouton pour ouvrir/fermer

Props

PropTypeDéfautRequisDescription
isOpenboolean—✓État du menu (ouvert ou fermé).
onClose() => void—✓Callback appelé lors de la fermeture du menu (clic sur overlay ou lien).

Caractéristiques

  • Navigation complète : Même structure qu'une sidebar avec toutes les sections
  • Overlay semi-transparent : Fond assombri pour fermer en cliquant dessus
  • Position fixe : Couvre l'écran depuis le haut de la barre jusqu'en bas
  • Largeur responsive : 280px de largeur fixe avec scroll interne
  • Active state : Indique la page actuelle avec couleur et icône

Utilisation

tsx
import { MobileNav } from "@brickslab/catalog";  // Composant du catalog

function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>    
      <button onClick={() => setOpen(true)}>Ouvrir menu</button>
      <MobileNav isOpen={open} onClose={() => setOpen(false)} />
    </>
  );
}

Notes

⚠️ Le Burger Menu est un composant du catalogue, géré par la Topbar. Il s'affiche automatiquement sous 1024px de largeur et ferme au clic sur un lien ou l'overlay.