Element: #165 Anatomy (layout/app-shell)
What it shows: A labelled diagram of the app shell showing a 52px rail, a 200px panel and the main content area.
When to use: Explaining how the app shell is divided before wiring navigation into it.
Spec:
- Root is `role="img"` with `aria-label="App shell anatomy: rail, panel and main content"`
- Rail label `Rail 52px` over 4 icon blocks, the second marked `class:rail-icon--active={i === 1}`
- Panel label `Panel 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%`
Tags: app-shell, anatomy, rail, panel, layout, diagram
Needs: @codeatlasdev/ui@4.4.0
Components: none
Live demo: https://ui.codeatlas.com.br/docs/layout/app-shell#anatomy
Rail 52px
{#each [0, 1, 2, 3] as i}
{/each}
Panel 200px
{#each ['Dashboard', 'Users', 'Reports', 'Settings'] as item, i}