Sidebar
Main content + sidebar (stacks on mobile, side-by-side on tablet+). Sidebar min-width uses --af-sidebar-width (default 16rem). Overlay panels use Drawer and --af-drawer-width.
Distinct from App shell (af-app), which is full-viewport dashboard chrome.
Inbox-style three-column screens compose both: af-app for the rail, af-sidebar inside main. See the package blueprint.
Class reference
Section titled “Class reference”| Class | Purpose | Example |
|---|---|---|
af-sidebar | In-page main + sidebar grid | <div class="af-sidebar"> |
Example
Section titled “Example”<div class="af-sidebar">
<main>Main content (1fr)</main>
<aside class="af-card">Sidebar (--af-sidebar-width)</aside>
</div>