#480
Panel width
An app shell whose panel starts at 280px for long item names and has a drag handle on its edge.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Panel width" pattern (@codeatlasdev/ui demo #480, layout/app-shell) in my app.
Call get_demo({ ids: ["#480"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Navigation lists with long labels, or when users want to choose how wide the panel is.
Keep these library parts, with the props and tokens the demo uses:
- AppShellLayout, PageShell, Card, NavModule from "@codeatlasdev/ui"
Behaviour to keep:
- `<AppShellLayout {modules} {pathname} panelWidth={280} resizablePanel persistPanel={false} mainId={null} skipLink={false}>`
- One module `id: 'projects'` with 3 items whose labels are long (Quarterly revenue forecast and planning, Customer onboarding experience redesign, Infrastructure cost review)
- A second module `id: 'other'` with `items: []`
- Page is `<PageShell title="Wider panel" description="Drag the panel edge, or focus it and use the arrow keys.">` with one `Card` hint about the 160px to 480px range
- Stage height is `height: 360px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<AppShellLayout {modules} {pathname} panelWidth={280} resizablePanel persistPanel={false} mainId={null} skipLink={false}>`
- One module `id: 'projects'` with 3 items whose labels are long (Quarterly revenue forecast and planning, Customer onboarding experience redesign, Infrastructure cost review)
- A second module `id: 'other'` with `items: []`
- Page is `<PageShell title="Wider panel" description="Drag the panel edge, or focus it and use the arrow keys.">` with one `Card` hint about the 160px to 480px range
- Stage height is `height: 360px`
Related
Loading source.