App Shell

Side-nav application frame: brand and collapse in the rail head, area switcher in the main top bar, resize handle beside the rail. This docs site uses the same chrome — try the panel control beside the logo or drag the separator.

Recipe

import { appShell, sideNav } from '@sportingscouter/ui';
const shell = appShell({ mode: 'docsNav', collapsed: false });
const nav = sideNav({ mode: 'docs' });

Slots

App shell — root, rail, resizeHandle, main, topbar, body, scrim. Put a sideNav() tree inside rail; page chrome (area tabs, theme) lives in topbar.

Side nav — root, headRow, brand, collapse, body, nav, link, and related nav slots. Behaviour (collapse, resize, off-canvas) is implemented in app code — see site/src/assets/docs.js on this site.

Template

Full-page preview: Side nav shell uses layout: app.