import { Controls, Canvas, Meta, Source } from "@storybook/blocks"; import * as HeaderBarStories from "./HeaderBar.stories";

HeaderBar

Pour voir l'utilisation du menu, veuillez consulter le composant `HeaderBurgerMenu` dans le menu de gauche. ## API ## Les slots ### Prepend Le slot `prepend` permet d'ajouter du contenu en haut du header, il suivra le comportement du header au scroll. Il est possible de récupérer le status du Menu de header en utilisant la prop `menuOpen` du slot `prepend`. (Fonctionne uniquement pour les menus s'enregistrant via la fonction injectée `registerHeaderMenu`, ce qui est le cas pour le composant `HeaderBurgerMenu`). Le contenu du slot prend tout l'espace disponible en largeur. Pour que le contenu soit de même dimension que le header, il faut lui appliquer une largeur maximale de `1712px`. `} /> `}} /> ### Append Le slot `append` permet d'ajouter du contenu en bas du header, il suivra le comportement du header au scroll. Il est également possible de récupérer le status du Menu de header en utilisant la prop `menuOpen` du slot `append`. Le contenu du slot prend tout l'espace disponible en largeur. Pour que le contenu soit de même dimension que le header, il faut lui appliquer une largeur maximale de `1712px`. `} /> `}} /> ### Menu Le slot `menu` permet d'ajouter un menu au header. Il est recommandé d'utiliser le composant `HeaderBurgerMenu` du design system. `} /> Voir le composant `HeaderBurgerMenu` pour un exemple d'usage.. ### Logo Le slot `logo` permet d’écraser le logo par défaut du header. Il est déconseillé de l'utiliser. Si cela n'est pas possible l'intégration d'un nouveau logo doit se faire en respectant les guidelines de la charte graphique. `} />



`}} /> ### CustomBrand Le slot `custom-brand` permet d'ajouter un contenu personnalisé à la place du logo. Il est possible d'ajouter plusieurs éléments dans ce slot. `}} /> ### HeaderSide Le slot `header-side` permet d'ajouter du contenu à droite du header. Il est possible d'ajouter plusieurs éléments dans ce slot. Il sera principalement utilisé pour ajouter un bouton de connexion, d'accès à un compte ou de recherche. Il est nécessaire de faire attention à la place que prendront les éléments en mode mobile et de prévoir un mode réduit ou bien de les déporter dans le menu burger. import { mdiMagnify, mdiAccountCircleOutline } from '@mdi/js' import '../../stories/styles/shared.css'; `}} />