Patterns & Shell

FormeAppShell

Le shell d'application du DS 2.0 : la coquille complète d'une page — barre latérale à gauche, contenu à droite, et le tiroir mobile natif (burger + drawer) géré pour toi. Il enrobe l'AppShell d'Astryx (variant section) et FormeSideNav sous une seule API Forme.

Aperçu

Le cadre section : nav à gauche (sections, icônes, item isSelected, badges), un fin trait séparateur, et le contenu de page en children. (Tire la poignée à droite pour voir le contenu s'adapter.)

import { FormeAppShell, FormeAdminLockup, FormeAccountMenu, AccountMenuItem } from "@forme-ch/ui";
import { SearchInput } from "@forme-ch/ui/controls";
import { ReceiptIcon, FileTextIcon, UsersThreeIcon, SignOutIcon } from "@forme-ch/ui/icons";
import Link from "next/link";

<FormeAppShell
  variant="section"
  linkComponent={Link}
  collapsible
  resizable=&#123;&#123; defaultWidth: 280, minWidth: 220, maxWidth: 400 &#125;&#125;
  header={<FormeAdminLockup height={20} />}
  topContent={<SearchInput placeholder="Rechercher…" size="sm" />}
  footer={
    <FormeAccountMenu name="Jeremy Doe" sub="Forme®Admin" avatar="JD">
      <AccountMenuItem icon={<SignOutIcon size={15} />}>Déconnexion</AccountMenuItem>
    </FormeAccountMenu>
  }
  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} /> },
    ]},
  ]}
>
  <PageContent />
</FormeAppShell>

Import

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

Deux modes de barre latérale

Nav simple (la plupart des pages) : passe groups, et FormeAppShell construit la FormeSideNav pour toi. Nav applicative riche (un arbre de conversations, des menus contextuels par ligne — ce que groups ne couvre pas) : passe une barre déjà composée en sideNav. Elle reste un <FormeSideNav> (items riches en children) — jamais un SideNav Astryx brut : le style de barre est garanti par le socle, l'app ne fournit que le contenu métier.

// Mode riche : la sidebar métier reste un FormeSideNav
<FormeAppShell sideNav={<ChatSidebar />}>
  <ChatContent />
</FormeAppShell>

Mobile — natif

Sous le breakpoint (défaut md), AppShell génère le burger et le tiroir automatiquement à partir de la barre. Aucune plomberie côté app. Pour refermer le tiroir après une action (sélection d'une conversation, d'un projet…), pilote-le en mode contrôlé avec mobileOpen / onMobileOpenChange.

Props

Composition & slots

Le cadre est fixe : la nav (header → topContent → groups / sideNav → sidebarChildren → footer) à gauche, le banner puis les children à droite. Le menu de compte se compose dans footer avec FormeAccountMenu. La barre elle-même est documentée sur FormeSideNav.

Accessibilité

• ariaLabel nomme la région de navigation (défaut « Navigation »).
• Le contenu est rendu dans un <main> — un seul par page.
• Le tiroir mobile gère le focus et la fermeture (Échap) nativement — ne le réimplémente pas.

Do & Don't