#090
Left and bottom
Two drawers opened from separate buttons: a 280px left navigation drawer and a bottom sort drawer.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Left and bottom" pattern (@codeatlasdev/ui demo #090, feedback/drawer) in my app.
Call get_demo({ ids: ["#090"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Mobile style navigation from the left and option pickers sliding up from the bottom.
Keep these library parts, with the props and tokens the demo uses:
- Drawer, Button, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- Left: `<Drawer bind:open={leftOpen} title="Navigation" side="left" width="280px">` with 5 items: Dashboard, Users, Products, Reports, Settings
- Bottom: `<Drawer bind:open={bottomOpen} title="Sort by" side="bottom">` with 5 options: Name (A-Z), Name (Z-A), Date joined, Last active, Role
- Items are native `<button class="item"` elements inside `<Stack gap="1">` generated by `{#each`
- Each item closes its drawer with `onclick={() => (leftOpen = false)}` or `onclick={() => (bottomOpen = false)}`
- Triggers are two `<Button variant="outlined"` labelled Open left and Open bottom
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
- Left: `<Drawer bind:open={leftOpen} title="Navigation" side="left" width="280px">` with 5 items: Dashboard, Users, Products, Reports, Settings
- Bottom: `<Drawer bind:open={bottomOpen} title="Sort by" side="bottom">` with 5 options: Name (A-Z), Name (Z-A), Date joined, Last active, Role
- Items are native `<button class="item"` elements inside `<Stack gap="1">` generated by `{#each`
- Each item closes its drawer with `onclick={() => (leftOpen = false)}` or `onclick={() => (bottomOpen = false)}`
- Triggers are two `<Button variant="outlined"` labelled Open left and Open bottom
Related
Loading source.