Patterns & Shell

FormeSideNav

La barre de navigation latérale du DS 2.0. Composant phare du shell : il enrobe le SideNav d'Astryx sous une API Forme data-mode — tu passes des groups et des slots, le rendu (radius, densité, badges pilule) vient des tokens Forme. Auto-stylé, donc l'aperçu ci-dessous est le vrai composant en conditions réelles.

Aperçu

Une barre avec deux sections, des icons (via @forme-ch/ui/icons), un item isSelected, deux badges numériques, un slot header (lockup), un topContent (recherche) et un footer (compte).

import { FormeSideNav, FormeAdminLockup } from "@forme-ch/ui";
import { SearchInput, IconButton } from "@forme-ch/ui/controls";
import { ReceiptIcon, FileTextIcon, UsersThreeIcon } from "@forme-ch/ui/icons";

<FormeSideNav
  ariaLabel="Navigation Forme®Admin"
  header={<FormeAdminLockup height={20} />}
  topContent={<SearchInput value={q} onChange={setQ} placeholder="Rechercher…" size="sm" />}
  footer={<AccountBlock />}
  groups={[
    { title: "Ventes", items: [
      { label: "Factures", href: "/admin/factures", icon: <ReceiptIcon size={18} />, isSelected: true, badge: 12 },
      { label: "Devis", href: "/admin/devis", icon: <FileTextIcon size={18} />, badge: 3 },
    ]},
    { title: "Organisation", items: [
      { label: "Clients", href: "/admin/clients", icon: <UsersThreeIcon size={18} /> },
    ]},
  ]}
/>

Import

// Ré-exporté par l'index et par l'entrée /shell
import { FormeSideNav } from "@forme-ch/ui";
// ou
import { FormeSideNav } from "@forme-ch/ui/shell";

Props

Item — FormeSideNavItem

Groupe — FormeSideNavGroup

title (requis) · items (requis) · isHeaderHidden? — masque le titre visuellement tout en le laissant lisible par les lecteurs d'écran.

Commutateur des espaces — FormeEspaceSwitcher

En tête de la barre, le commutateur des espaces remplace le lockup fixe : il coiffe la FormeSideNav (slot header) et permet de passer entre les espaces Forme (Admin, Intranet, Hermès, Studio, Space, Design). Direction « marque constante » : le wordmark Forme® ne bouge jamais ; le nom de lespace actif suit après une fine barre verticale, avec un chevron. Monochrome, navigation en place. Le registre des destinations est partagé au socle (FORME_ESPACES) : une app importe la liste et déclare son current — ajouter un espace = une ligne, propagée partout.

import { FormeSideNav, FormeEspaceSwitcher, FORME_ESPACES } from "@forme-ch/ui/shell";
import { FormeWordmark } from "@forme-ch/ui";
import { ChevronDownIcon, CheckIcon } from "@forme-ch/ui/icons";

<FormeSideNav
  linkComponent={Link}
  header={
    <FormeEspaceSwitcher
      wordmark={<FormeWordmark height={22} />}
      espaces={FORME_ESPACES}
      current="admin"
      linkComponent={Link}
      chevron={<ChevronDownIcon size={16} />}
      check={<CheckIcon size={16} />}
    />
  }
  groups={[]}
/>

Props — FormeEspaceSwitcher

Composition & slots

Le squelette sticky est fixe : header en haut, puis topContent, puis les groups (zone scrollable), children juste après pour les listes dynamiques, enfin footer et footerIcons collés en bas. Le menu de compte se compose dans le slot footer — voir la page « Menu de compte ».

Accessibilité

• ariaLabel nomme la région de navigation (défaut « Navigation »). Donne-lui un nom distinctif s'il y a plusieurs <nav>.
• Le badge numérique passe par le Badge Forme : il est lu comme texte, pas comme décoration.
• L'item actif porte l'état sélectionné natif Astryx (aria-current) — ne le simule pas en CSS.
• Fournis icon déjà dimensionnée (size=18) : c'est une décoration, le label reste le nom accessible.

Do & Don't