Components

App shell

A full application scaffold on a CSS grid: a full-width header that reuses the app-bar look, a left sidebar (1px right rule) holding a vertical nav, and a scrolling main content area. Named grid areas keep the regions legible; at --ds-bp-md the sidebar collapses behind a toggle.

Layout

The grid uses grid-template-areas for header / sidebar / main. This preview is height-constrained to read as a compact frame — in an app the shell fills the viewport. Narrow the window below 940px to see the sidebar drop out and the header gain a ☰ toggle.

Header · sidebar · main
Diametral Console

Dashboard

Main content scrolls independently of the header and sidebar. Drop any components in here — tables, status panels, cards.

<div class="ds-shell">
  <header class="ds-shell__header">
    <button class="ds-shell__toggle" type="button" aria-label="Toggle navigation">☰</button>
    <span class="ds-wordmark">…</span>
  </header>
  <aside class="ds-shell__sidebar">
    <nav class="ds-vnav" aria-label="Sidebar">
      <a class="ds-vnav__item is-active" href="#" aria-current="page">Dashboard</a>
      <a class="ds-vnav__item" href="#">Pricing matrix</a>
    </nav>
  </aside>
  <main class="ds-shell__main">…</main>
</div>

Collapsed sidebar

Below --ds-bp-md the sidebar is hidden by default; add is-sidebar-open to the .ds-shell to band it back in above the main area. The header's ☰ toggle drives this — click it in the demo above when the window is narrow.

is-sidebar-open 
<!-- narrow screens: this modifier reveals the sidebar band -->
<div class="ds-shell is-sidebar-open">
  <header class="ds-shell__header">…</header>
  <aside class="ds-shell__sidebar">…</aside>
  <main class="ds-shell__main">…</main>
</div>

React

Pass the three regions as props: header, sidebar, and children (the main area). The narrow-screen toggle works controlled (collapsed/onToggle) or uncontrolled (defaultCollapsed).

<AppShell /> 
import { AppShell, Wordmark, VerticalNav } from "@diametral/design-system/react";

<AppShell
  header={<Wordmark sub="Console" />}
  sidebar={
    <VerticalNav
      items={[
        { label: "Dashboard", href: "/", active: true },
        { label: "Pricing matrix", href: "/matrix" },
        { label: "Entities", href: "/entities" },
      ]}
    />
  }
>
  <h1 className="ds-title">Dashboard</h1>
</AppShell>