Brickslab.Tools

@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

Prop	Type	Défaut	Requis	Description
`isOpen`	`boolean`	—	✓	État du menu (ouvert ou fermé).
`onClose`	`() => void`	—	✓	Callback appelé lors de la fermeture du menu (clic sur overlay ou lien).

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  isOpen={true}
  onClose={...}
/>

isOpenonClose

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.