#165
Anatomy
A labelled diagram of the app shell showing a 52px rail, a 200px panel and the main content area.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Anatomy" pattern (@codeatlasdev/ui demo #165, layout/app-shell) in my app.
Call get_demo({ ids: ["#165"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Explaining how the app shell is divided before wiring navigation into it.
Keep these library parts, with the props and tokens the demo uses:
Behaviour to keep:
- Root is `role="img"` with `aria-label="App shell anatomy: rail, panel and main content"`
- Rail label `Rail<br />52px` over 4 icon blocks, the second marked `class:rail-icon--active={i === 1}`
- Panel label `Panel<br />200px` over items Dashboard, Users, Reports, Settings, the first marked `class:panel-item--active={i === 0}`
- Main area labelled Main content with a top bar and 3 content blocks, one `content-block--short`
- Diagram size is `height: 280px` and `width: 100%`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- Root is `role="img"` with `aria-label="App shell anatomy: rail, panel and main content"`
- Rail label `Rail<br />52px` over 4 icon blocks, the second marked `class:rail-icon--active={i === 1}`
- Panel label `Panel<br />200px` over items Dashboard, Users, Reports, Settings, the first marked `class:panel-item--active={i === 0}`
- Main area labelled Main content with a top bar and 3 content blocks, one `content-block--short`
- Diagram size is `height: 280px` and `width: 100%`
Related
Loading source.