AdminShell

Implemented

Outer shell — horizontal layout: Sidebar (247px) + Content (flex). 12px gap, 12px padding around. Min-height 100vh. Sticky sidebar.

Categorytemplates

Sourcepatterns/templates/adminshell.html

AI HintUse for page layouts. Define structure and composition patterns.

Coquille du tableau de bord admin ePassLive : header (marque + topbar + utilisateur), rail de navigation latérale 247 px sticky (sections + badges), contenu principal. FR-CA : « Tableau de bord producteur · Navigation principale · Billets · Événements · Lieux · Équipe ».

AdminShell

Template — Admin family (ADR-035 KEEP-and-EXPORT #1)

Template complet du tableau de bord. Rend son propre header (titre + sous-titre + topbar slot + identité utilisateur), un rail de navigation latérale (247 px, sticky à lg+, gap/padding 12 px) avec sections groupées (Billets / Croissance / Système) et une zone <main> id="main" landmark pour le contenu de la page. Empilé sous lg. Ne compose pas AdminHeader/AdminSidebar — le shell rend sa propre nav (template auto-contenu, cf. AdminLayout pour un frame à slots).

ePassLive — AdminTableau de bord producteur

14 evenements actifs · 2 alertesMarie Tremblay · Producteur - Maison symphonique

Bonjour, Marie

Voici un apercu de l'activite de la journee.

Billets vendus (jour)

312

Revenus (jour)

14 980,00 $

Scans portes (jour)

289

This component supports light and dark mode.

Composition

AdminShell rend : header (marque + tagline + topbar slot + identité utilisateur) + rail de navigation latérale 247 px sticky à lg+ (gap et padding 12 px, empilé sous lg) + zone main landmark. Chaque item de navigation peut avoir un badge (FR-CA : « Nouveau », « 12 »). Pour un frame à slots personnalisés (sidebar/header sur mesure, skip link), voir l'organisme AdminLayout.

Prop

Type

Default

Description

topbar*

React.ReactNode

—

Slot à droite du header (notifications, recherche, actions).

navItems*

AdminNavItem[]

—

Items de navigation principale (id, label, href, active?, badge?).

navSections

AdminNavSection[]

—

Sections groupées en bas de la nav (heading + items).

children*

React.ReactNode

—

Contenu de la page (rendu dans le landmark <main>).

user*

{ fullName: string; role: string }

—

Utilisateur courant affiché à droite du header.

locale

"fr" | "en"

'fr'

Locale des chaînes intégrées (tagline, titre de nav).

title

string

"ePassLive — Admin"

Titre de marque du header.

subtitle

string

tagline de la locale

Tagline à côté de la marque.

className

string

—

Classes additionnelles sur la racine.

Props

Preview

AdminShell

Prop

Type

Required

Default

Description

topbar

React.ReactNode

Required

—

Slot rendered at the right end of the header (search, notifications, actions…).

navItems

AdminNavItem[]

Required

—

Primary navigation links, rendered first in the sidebar. Each item is { id, label, href, active?, badge? }; active items get aria-current="page".

navSections

{ heading: string; items: AdminNavItem[] }[]

Optional

—

Optional secondary navigation groups ({ heading, items }) rendered below the primary list; items support badges and aria-current like navItems.

children

React.ReactNode

Required

—

Page content rendered inside the `main` landmark (id="main", overflow-safe min-w-0 grid child).

user

{ fullName: string; role: string }

Required

—

Current user identity shown at the right end of the header (fullName + muted role).

locale

"fr" | "en"

Optional

'fr'

UI locale for the built-in strings (header tagline, sr-only nav heading) via the LABELS map.

title

string

Optional

'ePassLive — Admin'

Header brand title; defaults to "ePassLive — Admin". Override for white-label admin frames.

subtitle

string

Optional

locale tagline

Header tagline next to the brand; defaults to the locale string ("Tableau de bord producteur" / "Producer dashboard").

className

string

Optional

—

Extra classes appended to the root element.

Quick use:<AdminShell />

Accessibility

ARIA rolenone (layout container)

Usage

Import

tsxSnippet

import { AdminShell } from "@epasslive/design-system"

Example 1

tsxSnippet

<AdminShell topbar={topbarSlot} navItems={navItems} user={user}>{page}</AdminShell>

Example 2

tsxSnippet

<AdminShell navItems={navItems} navSections={sections} user={user} locale="en" title="Admin">{page}</AdminShell>

Anti-patterns

— Do not include business logic in templates

— Avoid hardcoded content in templates