Patterns & Shell

Menu de compte

Le bloc « compte » vit dans le pied de la barre latérale : un déclencheur (avatar + nom) qui ouvre un menu vers le haut. Dans le DS 2.0, on le compose dans le slot footer de FormeSideNav.

Pas d'aperçu live sur cette page. FormeAccountMenu est un composant legacy présentationnel qui émet le markup .sidebar__account*, stylé par la CSS @forme-ch/ui/styles/components.css — non chargée dans ce catalogue. Sans elle, le rendu serait cassé. On documente donc le pattern et les snippets ; réfère-toi à FormeSideNav pour le rendu réel de la barre.

Le pattern

Trois briques : le déclencheur (avatar + name + sub), un en-tête d'identité, puis des items — typiquement thème, densité et déconnexion. Les items thème/densité utilisent keepOpen pour ne pas fermer le menu à chaque cycle.

import { FormeSideNav } from "@forme-ch/ui";
import {
  FormeAccountMenu,
  AccountMenuHead, AccountMenuEmail,
  AccountMenuItem, AccountMenuSep,
} from "@forme-ch/ui";
import { SunIcon, RowsIcon, SettingsIcon, SignOutIcon } from "@forme-ch/ui/icons";

<FormeSideNav
  groups={groups}
  footer={
    <FormeAccountMenu avatar="JD" name="Jeremy Doe" sub="Forme®Admin">
      <AccountMenuHead>
        <AccountMenuEmail>jeremy@forme.ch</AccountMenuEmail>
      </AccountMenuHead>

      <AccountMenuItem icon={<SunIcon />} keepOpen value="Clair" onClick={cycleTheme}>
        Thème
      </AccountMenuItem>
      <AccountMenuItem icon={<RowsIcon />} keepOpen value="Confort" onClick={cycleDensity}>
        Densité
      </AccountMenuItem>

      <AccountMenuSep />

      <AccountMenuItem icon={<SettingsIcon />} onClick={openSettings}>Réglages</AccountMenuItem>
      <AccountMenuItem icon={<SignOutIcon />} onClick={logout}>Déconnexion</AccountMenuItem>
    </FormeAccountMenu>
  }
/>

Props — `FormeAccountMenu`

Prop	Type	Défaut	Description
`avatar` *	`ReactNode`	—	Initiales (string) ou nœud (ex. `<img>`). Rendu dans `.sidebar__account-avatar`.
`name` *	`ReactNode`	—	Nom affiché sur le déclencheur.
`sub`	`ReactNode`	—	Sous-titre sous le nom (ex. « Paramètres », « Aperçu · Client »).
`children` *	`ReactNode`	—	Items du menu (app-spécifiques), rendus dans `.sidebar__account-menu`.
`ariaLabel`	`string`	—	Nom accessible du déclencheur.
`defaultOpen`	`boolean`	`false`	Ouvre le menu au montage (utile pour l'aperçu / le catalogue DS).
`className`	`string`	—	Classe(s) additionnelle(s).

Primitives compagnes

À utiliser en children (exportées par @forme-ch/ui) :

AccountMenuItem — item bouton (role="menuitem"). Props utiles : icon?, value? (valeur affichée à droite), active? (pose data-active), check?, keepOpen? (ne ferme pas le menu — idéal pour un cycleur de thème/densité), onClick.
AccountMenuSep — séparateur (role="separator"), sans prop.
AccountMenuHead — bloc d'en-tête d'identité.
AccountMenuEmail — ligne e-mail (title? pour le survol).

Convergence

Historiquement, chaque app Forme réinventait son menu de compte (thème, déconnexion) dans son propre markup. Le DS 2.0 fait converger le pattern : un seul footer de FormeSideNav, les mêmes primitives, le même comportement clavier. Les différences (items propres à Admin vs AI vs Frame) restent des children, mais l'ossature, l'a11y et l'ouverture-vers-le-haut sont mutualisées. À terme, ces primitives basculent sur le socle Astryx comme le reste du shell.

Accessibilité

Déclencheur : aria-haspopup="menu" + aria-expanded + aria-label.
Conteneur : role="menu", items en role="menuitem".
Fermeture au clic-dehors (mousedown) et à Échap. Le chevron pivote selon data-open.

Do & Don't

✓ À faire

Placer le compte dans footer. Grouper thème/densité en haut avec keepOpen, la déconnexion en bas après un AccountMenuSep.

✕ À éviter

Refaire un dropdown maison en pied de barre. Fermer le menu à chaque changement de thème (oublier keepOpen). Mélanger réglages et déconnexion sans séparateur.