Menu latéral

Menu latéral dans Storybook

Note: Ce composant doit être utilisé uniquement dans le cadre des modèles UX de mise en page et non dans des scénarios isolés ou personnalisés.

Pour obtenir de la documentation sur le composant de menu latéral pour les modèles UX d'en-tête, reportez-vous à cette page.

Utilisation

Présentation

Le menu latéral est un composant de mise en page qui fournit un conteneur latéral réductible, généralement utilisé pour la navigation sur les petits écrans. Il est déclenché par un bouton et révèle un panneau permettant de contenir d’autres composants.

Dans le cadre du système de mise en page flexible de Jutro, ce composant est exclusivement responsable de la mise en page et du comportement du panneau de menu (c’est-à-dire l’ouverture et la fermeture). Il est indépendant du contenu, ce qui signifie que c'est à vous de le remplir avec des éléments de menu et des liens, ainsi que d’implémenter les routages associés.

Quand l'utiliser

Utilisez le menu latéral lorsque vous devez :

• Fournir une solution de navigation compacte pour les conceptions réactives, en particulier pour les fenêtres d’affichage des tablettes et des appareils mobiles.
• Héberger des actions secondaires ou des liens qui n’ont pas besoin d’être visibles en permanence sur la page.
• Créer une structure de page personnalisée à l’aide des nouveaux composants de mise en page, qui nécessite un menu latéral activable.

Formatage

Structure

Le composant de menu latéral comprend les éléments suivants :

1. Bouton de déclenchement : bouton d’icône qui permet de modifier ou de désactiver la visibilité du panneau de menu. L’apparence est gérée par le composant.
2. Panneau de menu : conteneur qui apparaît à l’ouverture du menu. Vous pouvez placer n’importe quel composant enfant à l’intérieur de ce panneau, tel que des listes de navigation, des champs de recherche ou des boutons d’action.

Emplacement

Le menu latéral est conçu pour être placé dans un panneau d’en-tête ou au niveau supérieur d’une mise en page personnalisée.

Comportement

• Interaction : la sélection du bouton de déclenchement ouvre le panneau de menu. Il est possible de fermer le panneau en sélectionnant le bouton Fermer par défaut, en cliquant sur la zone en dehors du menu ou en utilisant un bouton personnalisé.
• État : la visibilité du composant est contrôlée par programmation à l’aide des propriétés open et onOpenChange.

Meilleures pratiques

Alléger au maximum

Le menu latéral est un conteneur pour d'autres composants. Pour garantir une bonne expérience utilisateur, remplissez-le avec du contenu simple et ciblé. Évitez de surcharger le panneau avec trop d’éléments ou de structures profondément imbriquées.

Proposer une option claire pour en sortir

Les utilisateurs doivent toujours disposer d’un moyen évident de fermer le menu. Le composant inclut un bouton Fermer par défaut. Si vous utilisez la propriété hideCloseButton, veillez à fournir un élément personnalisé qui permet aux utilisateurs de fermer le panneau.

Utiliser des étiquettes concises

Si vous ajoutez des liens de navigation ou d’autres éléments interactifs dans le menu latéral, leurs étiquettes doivent être courtes, claires et prévisibles. Utilisez des noms pour les liens vers des destinations (par exemple, « Tableau de bord », « Paramètres ») et des verbes pour les actions (par exemple, « Ajouter un utilisateur », « Exporter les données »).

Composants associés

• HeaderPanel
• SidePanel
• SubheaderPanel
• ToolsSidePanel
• FooterPanel

Code

Démonstration d'un exemple de base sur storybook

.

function BurgerMenuBasic() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

  return (
    <BurgerMenu
      open={open}
      onOpenChange={onOpenChange}>
      <h3>Menu</h3>
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu>
  );
}

Instruction d'importation

import { BurgerMenu } from '@jutro/components';

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

childrenobligatoire

Type

React.ReactNode

Description

The children elements to render inside the component.

hideCloseButton

Type

boolean

Description

If set to true, the Close button is not rendered.

onOpenChange

Type

(open: boolean) => void

Description

Callback to run when the burger menu is opened or closed.

open

Type

boolean

Description

If set to true, the burger menu is currently open.

Crochets

Aucun crochet n'est disponible pour burger menu.

Clés de traduction

Le composant de menu latéral définit deux clés de traduction :

Clé	Utilisée pour
jutro-components.BurgerMenu.openButtonLabel	Description de l’apparence et de la fonction du bouton Ouvrir.
jutro-components.BurgerMenu.closeButtonLabel	Description de l’apparence et de la fonction du bouton Fermer.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement un menu latéral et connaître les différentes options de configuration que nous proposons.

Exemple de menu latéral de base

Un menu latéral de base est un wrapper placé autour d’un certain nombre d’éléments enfants. Il affichera un menu réductible sur le côté de l’écran, auquel un utilisateur pourra accéder en cliquant dessus. Vous devrez également utiliser l’état setOpen et le crochet open de l’état React pour obtenir l’état actuel du menu et le modifier lorsque l'utilisateur appuie sur le bouton pour l’ouvrir.

Démonstration d'un exemple de base sur storybook

.

function BurgerMenuBasic() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

  return (
    <BurgerMenu
      open={open}
      onOpenChange={onOpenChange}>
      <h3>Menu</h3>
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu>
  );
}

Exemple de bouton personnalisé

Vous pouvez ajouter un bouton personnalisé pour réduire le menu latéral comme l’un de ses éléments enfants.

Démonstration d’un exemple de bouton personnalisé sur Storybook.

function BurgerMenuCustomButton() {
  const [open, setOpen] = useState(false);
  const onOpenChange = (isOpen: boolean) => setOpen(isOpen);

return ( 
  <BurgerMenu 
    hideCloseButton
    open={open}
    onOpenChange={onOpenChange}> 
    <Button 
      label="Click the button to close the navigation" 
      hideLabel 
      icon={KeyboardArrowLeftIcon} 
      variant="secondary" 
      onClick={() => onOpenChange(!open)} 
      /> 
      <h3>Menu</h3> 
      <TextInput
        label="Search"
        hideLabel
        placeholder="Search..."
      />
    </BurgerMenu> ); }

Journal des modifications

10.10.0

Ajout d’un composant de menu latéral.