Dashboard
App shell after shadcn-svelte sidebar-07, metric cards after dashboard-01 (no charts). Desktop: the fold button sets data-collapsed (icons stay, labels hide; hover an icon for a
tooltip). Below 40rem the menu button opens an overlay; icon-collapse
does not apply. Header is a team dropdown (inline SVG marks). Footer
is a user dropdown (Account, Billing, Log out). Composes Sidebar, Card, Button, Breadcrumb, Table, Dropdown, and Tooltip.
Outline is the map; Full is src/components/blocks/Dashboard.svelte.
Two extra examples below the block put a navigation menu in the topbar: in the scrolling column it leaves; with data-pin it stays.
Preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-003 | Overdue | Bank | $350.00 |
| INV-004 | Paid | Card | $450.00 |
In flow
The topbar sits inside the scrolling column, so it leaves as you
scroll. Same .nav-menu pattern as the docs chrome
(a short stand-in, not the full grid).
Scroll this well. The in-flow topbar leaves; the pinned bar stays.
More copy so the column is taller than the well.
Keep going until the topbar has to move or stick.
End of the demo column.
Pinned
data-pin on .topbar sticks it to the top
of the well. Not a class named sticky. Pin structure
is in alumna-css; background is Vega skin here.
Scroll this well. The in-flow topbar leaves; the pinned bar stays.
More copy so the column is taller than the well.
Keep going until the topbar has to move or stick.
End of the demo column.