refactor(layout): split sidebar into nav+badge chips; move help/theme to topbar dropdown #114

Merged
varutasu merged 1 commit from sidebar-split-and-profile-dropdown into main 2026-06-04 13:16:10 -04:00

1 commit

Author SHA1 Message Date
Randall Stillwell
b8a4a87cec refactor(layout): split sidebar into nav+badge chips; move help/theme to topbar dropdown
Operator feedback 2026-06-04:
- "make the navigation its own section, separated from the badges
  and progress"
- "move the help and theme toggle into the profile drop-down"

Changes:

components/Layout.js
- Desktop sidebar restructured: the single full-height chip is gone.
  The sidebar column is now <aside className="md:flex md:flex-col
  md:gap-4"> holding two independent floating glass chips:
    1. nav-chip (flex-1, rounded-3xl, glass-surface-mid) — logo,
       wordmark, NavigationContent, and the Sign-in CTA for logged-
       out visitors only.
    2. bottom-chip — for authenticated users this is the
       <DailyEmberWidget /> (already a self-contained glass-panel).
       For logged-out, it's a small glass-panel containing the
       Support + Theme icon row so those affordances stay reachable
       when there's no TopSearchBar dropdown.
  The visible body-gradient gap between the two chips is the new
  separation the operator asked for.
- Authenticated path no longer renders Support / Theme icons in the
  sidebar bottom — they live in the TopSearchBar <UserMenu> dropdown.
- Mobile drawer: bottom Support+Theme row is now gated behind
  `!user`. Authenticated mobile users access the same affordances
  via the TopSearchBar avatar chip (visible on all viewports; the
  name/chevron portion is hidden on < md but the chip itself stays).

components/ui/TopSearchBar.js
- The user-menu chip (previously a <Link href="/settings">) is now
  a real <UserMenu> dropdown sub-component:
    - Profile, Settings, Admin Panel (admins only), Help & Support,
      Theme toggle (button — toggles theme + closes menu),
      separator, Logout.
    - role="menu" + menuitem children; aria-haspopup + aria-expanded
      on the trigger; Escape key closes; click-outside scrim closes.
    - Uses useTheme() so the menu label flips between "Dark mode" /
      "Light mode" with the matching sun/moon icon.
    - Glass-surface-high background + rim-light + ember-rim-subtle
      + elevation-pronounced shadow stack so it reads as a popover
      above the floating header chip.

Tests:
- npm run test:run: 113/113
- npm run lint: 0 errors (1 pre-existing warning, not from this PR)
- npm run build: green

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-04 12:13:52 -05:00