Your dashboard
Everything you need to get involved in your community.
Downtown organizing team
Your hub for this community — agreements, reports and updates.
128
Members
4
Upcoming events
2
Open agreements
Components · App shell
The frame that wraps every page, drawn as a labelled wireframe of the real chrome: a top bar (brand wordmark, primary nav, a global search field and the user cluster), the left rail of grouped icon links with the active Home lit, the main content well that holds the page body, and the footer. Every surface reads from theme tokens — bg < surface < surface-2 — so the whole frame re-skins in one flip.
Everything you need to get involved in your community.
Your hub for this community — agreements, reports and updates.
The Events nav link and Your teams rail row are pinned :hover; the search field lifts its accent ring on :focus-within. Home is the active route in both the top bar (2px accent underline) and the rail (accent-soft wash + left accent bar), each also carrying aria-current="page".
border-b over bg-surface. Left: wordmark + primary <nav>. Center: the flex-1 global search. Right: notification bell (count chip) + user menu. Sticky top-0 z-30 in production.w-56 aside, border-r, bg-surface, hidden below md (a slide-over drawer takes over on mobile). Grouped icon links; active = accent-soft wash + accent label + aria-current.min-w-0 flex-1 over bg — the reading column where PageContainer (the <main>) and the routed page body render. The lowest surface tier, so panels above it read as raised.border-t, bg-surface, text-faint — a copyright line + a small link nav. Stacks on mobile, splits left / right from sm up.Source · src/components/Header.tsx (wordmark · nav links · search · actions) · PortalShell.tsx (header + rail + content + footer frame) · PortalSidebar.tsx (NavLink active wash + grouped <nav>) · mirrors design-system/shell.