App shell: left sidebar with three-group nav (Carol surfaces / career data / account), theme switch + user card in footer #140

New issue

Closed

opened 2026-06-19 17:34:22 +00:00 by james · 0 comments

james commented

2026-06-19 17:34:22 +00:00

Owner

Current shell is a horizontal app/(app)/components/top-nav.tsx. The Carol DS design (../carol-design/design_files/Sidebar.jsx, index.html) positions Carol as a sidebar-driven command center — left rail with grouped nav, dark-first aesthetic, theme switch + user card pinned to the footer.

Scope

Replace the top nav with a left sidebar at the layout level (app/(app)/layout.tsx): grid 248px 1fr, full viewport, overflow-y: auto on the main column.
Nav groups (top → bottom, thin dividers between):
- Carol surfaces: Chat (/chat, placeholder, epic #47), Applications (/applications, placeholder, epic #2)
- Career data: Profile, Skills, Experience, Projects, Network
- Account
New routes for Chat and Applications: app/(app)/chat/page.tsx, app/(app)/applications/page.tsx — both render the existing Placeholder component pointing at their epic.
Brand: copy ../carol-design/assets/carol-icon.svg into public/ and wire the brand row at the top of the sidebar (icon + "Carol" wordmark, display 700, 21px, letter-spacing: -0.03em).
Footer (pinned, margin-top: auto):
- Segmented light/dark theme switch (matches the DS pattern). Round-trips through the existing theme cookie + DB persistence (ADR-0008).
- User card: avatar tile (initials), name, email truncated, log-out icon button calling the existing logout flow.

Acceptance criteria

Sidebar renders correctly in both themes; active nav item highlighted via aria-current="page".
Theme switch in the footer persists per ADR-0008 (cookie + DB).
Log-out icon ends the session and redirects to /login.
Chat + Applications routes render the placeholder under the existing auth gate.
Old top-nav component is removed (no dead code).
Keyboard navigation: sidebar items reachable via Tab; active item announced.

Out of scope

Per-screen rebuilds (Account / Profile / Skills / Education — separate tickets).
Mobile / narrow-viewport collapse — follow-up once tablet/phone use matters.

Composes with

Design package, token-foundation ticket, component-primitives ticket, ADR-0008 (theme persistence), existing logout flow.

Current shell is a horizontal `app/(app)/components/top-nav.tsx`. The Carol DS design (`../carol-design/design_files/Sidebar.jsx`, `index.html`) positions Carol as a sidebar-driven command center — left rail with grouped nav, dark-first aesthetic, theme switch + user card pinned to the footer. ## Scope - Replace the top nav with a left sidebar at the layout level (`app/(app)/layout.tsx`): grid `248px 1fr`, full viewport, `overflow-y: auto` on the main column. - **Nav groups** (top → bottom, thin dividers between): - **Carol surfaces:** Chat (`/chat`, placeholder, epic #47), Applications (`/applications`, placeholder, epic #2) - **Career data:** Profile, Skills, Experience, Projects, Network - **Account** - **New routes** for Chat and Applications: `app/(app)/chat/page.tsx`, `app/(app)/applications/page.tsx` — both render the existing `Placeholder` component pointing at their epic. - **Brand:** copy `../carol-design/assets/carol-icon.svg` into `public/` and wire the brand row at the top of the sidebar (icon + "Carol" wordmark, display 700, 21px, `letter-spacing: -0.03em`). - **Footer (pinned, `margin-top: auto`):** - Segmented light/dark theme switch (matches the DS pattern). Round-trips through the existing theme cookie + DB persistence (ADR-0008). - User card: avatar tile (initials), name, email truncated, log-out icon button calling the existing logout flow. ## Acceptance criteria - [ ] Sidebar renders correctly in both themes; active nav item highlighted via `aria-current="page"`. - [ ] Theme switch in the footer persists per ADR-0008 (cookie + DB). - [ ] Log-out icon ends the session and redirects to `/login`. - [ ] Chat + Applications routes render the placeholder under the existing auth gate. - [ ] Old top-nav component is removed (no dead code). - [ ] Keyboard navigation: sidebar items reachable via Tab; active item announced. ## Out of scope - Per-screen rebuilds (Account / Profile / Skills / Education — separate tickets). - Mobile / narrow-viewport collapse — follow-up once tablet/phone use matters. ## Composes with Design package, token-foundation ticket, component-primitives ticket, ADR-0008 (theme persistence), existing logout flow.

james added the

area:pwa

foundation

labels

2026-06-19 17:36:09 +00:00

james referenced this issue from a commit

2026-06-20 01:28:38 +00:00

feat(pwa): replace top-nav with left sidebar app shell (#140)

james referenced this issue from a pull request that will close it,

2026-06-20 01:29:53 +00:00

feat(pwa): replace top-nav with left sidebar app shell (#140) #161

james closed this issue