#152
With leading icon
An app bar with a menu button in the leading slot and an Upgrade button plus avatar in the trailing slot.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "With leading icon" pattern (@codeatlasdev/ui demo #152, navigation/app-bar) in my app.
Call get_demo({ ids: ["#152"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Mobile or dashboard headers that need a menu toggle on the left and a primary call to action on the right.
Keep these library parts, with the props and tokens the demo uses:
- GlassAppBar, Button, IconButton, Avatar, Card from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card full flush>` wraps the bar
- `GlassAppBar` content is `<span class="title">Dashboard</span>`
- `{#snippet leading()}` holds `<IconButton aria-label="Open menu">` with `<Menu size={20} />`
- `{#snippet trailing()}` holds `<Button size="sm" variant="filled">Upgrade</Button>`
- Trailing also has `<Avatar alt="Carlos M" size="sm" />`
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
- GlassAppBar
@codeatlasdev/ui - Button
@codeatlasdev/ui - IconButton
@codeatlasdev/ui - Avatar
@codeatlasdev/ui - Card
@codeatlasdev/ui
How it is built
- `<Card full flush>` wraps the bar
- `GlassAppBar` content is `<span class="title">Dashboard</span>`
- `{#snippet leading()}` holds `<IconButton aria-label="Open menu">` with `<Menu size={20} />`
- `{#snippet trailing()}` holds `<Button size="sm" variant="filled">Upgrade</Button>`
- Trailing also has `<Avatar alt="Carlos M" size="sm" />`
Related
Loading source.