Tri-Sidebar

Features

• Six app-frame regions — full-width header and footer wrap a nav rail, main surface, status strip, and widgets aside
• grid-template-areas drive the layout, so regions reorder by area name rather than DOM position
• Left nav rail with an active row, section divider, and a profile block pinned to the bottom via a flex spacer
• Central main surface stacks a hero figure, spark chart, tick axis, paragraph bars, and a legend
• Right aside stacks a calendar dot grid, activity feed rows, and a card pinned to the bottom
• Responsive reflow — single mobile column, a two-column nav split, then the full three-column frame at 768px
• Skeleton wireframe placeholders with color-mixed accents derived from design tokens
• Per-region accent colors computed via oklch color-mix from semantic palette tokens

Accessibility

ARIA label

.bento grid has aria-label="Tri-sidebar layout"

Busy state

.bento starts aria-busy="true" and is cleared to false by markReady() once rendered

Reduced motion

prefers-reduced-motion: reduce kills all animations and transitions

Focus-visible

Interactive focus styling relies on :focus-visible from the design tokens

Dynamic viewport

Uses 100dvh for proper mobile viewport height

Customise it with AI

Open Tri-Sidebar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the layout is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.