#151
Default
An app bar with a title on the left and search, notifications and avatar on the right, inside a flush card.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Default" pattern (@codeatlasdev/ui demo #151, navigation/app-bar) in my app.
Call get_demo({ ids: ["#151"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Top bar of a page or panel with a product title and a few global quick actions.
Keep these library parts, with the props and tokens the demo uses:
- GlassAppBar, IconButton, Avatar, Card from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card full flush>` wraps the bar
- `GlassAppBar` content is `<span class="title">My Application</span>`
- `{#snippet trailing()}` holds two `IconButton` items with `aria-label="Search"` and `aria-label="Notifications"`
- Trailing also has `<Avatar alt="Ada L" size="sm" />`
- Icons are `<Search size={18} />` and `<Bell size={18} />` from `@lucide/svelte`
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
- `<Card full flush>` wraps the bar
- `GlassAppBar` content is `<span class="title">My Application</span>`
- `{#snippet trailing()}` holds two `IconButton` items with `aria-label="Search"` and `aria-label="Notifications"`
- Trailing also has `<Avatar alt="Ada L" size="sm" />`
- Icons are `<Search size={18} />` and `<Bell size={18} />` from `@lucide/svelte`
Related
Loading source.