Adminlayout

Usage

AdminLayout is the frame, not the page: fill the sidebar slot with the Sidebar molecule (pass collapsible so the frame works on mobile) and the header slot with AdminHeader, then render the route inside children. The frame owns zero i18n keys — override skipLabel / mainAriaLabel with translated strings when the app language isn't English, and pass AdminHeader its own required locale for its command-palette label.

import { AdminLayout, AdminHeader, Sidebar, type SidebarGroup } from '@epasslive/design-system'

const navGroups: SidebarGroup[] = [
  { id: 'manage', label: 'Manage', items: [
    { id: 'overview', label: 'Overview', href: '/admin' },
    { id: 'orders', label: 'Orders', href: '/admin/orders' },
    { id: 'events', label: 'Events', href: '/admin/events' },
  ] },
  { id: 'account', label: 'Account', items: [
    { id: 'team', label: 'Team', href: '/admin/team' },
    { id: 'settings', label: 'Settings', href: '/admin/settings' },
  ] },
]

<AdminLayout
  skipLabel={locale === 'fr' ? 'Aller au contenu principal' : undefined}
  sidebar={<Sidebar logo={<Logo />} groups={navGroups} activeKey="orders" collapsible />}
  header={<AdminHeader locale={locale} brand={<Logo />} onSearch={openPalette} />}
>
  {/* page content — renders inside <main id="admin-layout-main"> */}
  <OrdersPanel />
</AdminLayout>

Composition notes

The slots are plain ReactNode — the frame imposes no markup on them, so sidebars and headers stay independently swappable. The frame owns zero i18n keys: its only strings (skip-link label, main landmark aria-label) default English-literal and are overridable via skipLabel / mainAriaLabel — while AdminHeader takes its own required locale. The main region owns scrolling (overflow-x-auto with focus:outline-none): focus it on route change and broad tables scroll horizontally inside the frame. Header-slot dropdowns must portal to document.body — the content column clips (overflow-y-hidden). Pass a distinct id if a second frame ever appears, so the skip link still targets the right <main>. AdminLayout owns the "which admin frame" story — AdminShell is the legacy template retained per ADR-035; don't start new work on it.

Responsive behavior

The content column's <main> carries a responsive gutter (p-4 md:p-6) and sits in a min-w-0 flex column, so wide tables truncate or scroll inside the frame instead of blowing it out. Mobile is owned by the sidebar slot: compose the Sidebar molecule with collapsible and a breakpoint ( "lg" default) and it swaps to a portal drawer (scrim + focus trap + Escape + scroll lock) below the breakpoint while staying a persistent sticky rail at and above it.

Migrating from AdminSidebar

AdminSidebar (organism) is desktop-only legacy, kept for existing frames — not for new work (the storefront dashboard migrated off it in DS-CORR-08-05). Nothing changes on AdminLayout itself — the slot accepts either; new code should compose Sidebar. The API maps directly: groups becomes SidebarGroup[] (items gain icon, badge, nested children and an ADR-031 accent), activeId becomes activeKey, logo / ariaLabel / className / id are unchanged, and the mobile-drawer props (collapsible, breakpoint, defaultOpen, storageKey, toggleLabel, closeLabel) are new.

Accessibility

Skip-to-content link (WCAG 2.4.1 Bypass Blocks): translated off-canvas until focused (-translate-y-40 → focus:translate-y-0), named by its rendered skipLabel text, targeting the main region's id. The visible state uses the interactive token bg-ep-btn-primary (5.70:1 — AA in both themes) with a focus-visible ring. The main region is a real <main> landmark, focusable via tabIndex={-1} so programmatic focus lands without a visible ring trap (WCAG 2.4.3). Frame colors come from tokens, which meet AA contrast in both themes.

Props

Used By

DashboardShell — storefront (packages/storefront/src/components/dashboard/DashboardShell.tsx) — imports AdminLayout from the barrel and fills the slots with its DashboardSidebar (which composes the Sidebar molecule) and DashboardTopbar, with id="admin-layout".