#530
Labels, search slot, badges and More
An app shell with captions under the rail icons, a search trigger on top of the rail, per-module badges and a More sheet on mobile.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Labels, search slot, badges and More" pattern (@codeatlasdev/ui demo #530, layout/app-shell) in my app.
Call get_demo({ ids: ["#530"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Apps with many modules, a command palette, per-module counters and role-based navigation.
Keep these library parts, with the props and tokens the demo uses:
- AppShellLayout, Button, PageShell, Card, NavModule from "@codeatlasdev/ui"
Behaviour to keep:
- `<AppShellLayout {modules} filterModules={(m) => admin || m.id !== 'settings'} {pathname} onNavigate={(path) => (pathname = path)} railLabels persistPanel={false} mainId={null} skipLink={false}>` with `railTop` (a ghost search `Button`, aria-label 'Search, command K') and `bottomNavOverflow` (an outlined full-width 'Account' `Button`)
- 7 modules: Inbox (`badge: 12`), Map (`badge: 'dot'`, `badgeLabel: 'Search running'`), People (`badge: 3`, `badgeLabel: '3 tasks pending'`), Alerts, Search, Home, Settings; below 900px the bar shows 4 modules plus a More tab that opens a sheet with the rest
- `filterModules` is driven by an `admin` `$state`; a `Card` holds a hint and an outlined `Button` that toggles it
- Page is `<PageShell title="Labeled rail" description={pathname}>`; stage height is `height: 440px`
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
- AppShellLayout
@codeatlasdev/ui - Button
@codeatlasdev/ui - PageShell
@codeatlasdev/ui - Card
@codeatlasdev/ui
How it is built
- `<AppShellLayout {modules} filterModules={(m) => admin || m.id !== 'settings'} {pathname} onNavigate={(path) => (pathname = path)} railLabels persistPanel={false} mainId={null} skipLink={false}>` with `railTop` (a ghost search `Button`, aria-label 'Search, command K') and `bottomNavOverflow` (an outlined full-width 'Account' `Button`)
- 7 modules: Inbox (`badge: 12`), Map (`badge: 'dot'`, `badgeLabel: 'Search running'`), People (`badge: 3`, `badgeLabel: '3 tasks pending'`), Alerts, Search, Home, Settings; below 900px the bar shows 4 modules plus a More tab that opens a sheet with the rest
- `filterModules` is driven by an `admin` `$state`; a `Card` holds a hint and an outlined `Button` that toggles it
- Page is `<PageShell title="Labeled rail" description={pathname}>`; stage height is `height: 440px`
Related
Loading source.