# 06. Auth-Contextual Navbar With Dynamic Links

meta:
  id: landing-pages-and-admin-06
  feature: landing-pages-and-admin
  priority: P1
  depends_on: [landing-pages-and-admin-01]
  tags: [implementation, ui, navbar, auth]

objective:
- Make the navbar show contextually appropriate navigation links based on authentication state: logged-out users see marketing links (Features, Pricing, Blog), while logged-in users see product-specific links (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers) alongside Dashboard.

deliverables:
- Updated `/web/src/components/layout/Navbar.tsx` with auth-contextual link rendering
- Desktop and mobile nav menus both respect auth state
- Logged-out state: Features, Pricing, Blog links
- Logged-in state: Dashboard + product-specific links (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Settings)
- Smooth transitions between auth states

steps:
- Analyze current `navLinks` array in `Navbar.tsx`:
  - Current: `["Features" -> /features, "Pricing" -> /pricing, "Blog" -> /blog, "Dashboard" -> /dashboard]`
- Define two sets of nav links:
  - `marketingLinks`: Features → `/features`, Pricing → `/pricing`, Blog → `/blog`
  - `productLinks`: Dashboard → `/dashboard`, DarkWatch → `/darkwatch`, VoicePrint → `/voiceprint`, SpamShield → `/spamshield`, HomeTitle → `/hometitle`, RemoveBrokers → `/removebrokers`
- Update desktop nav section:
  - Wrap `marketingLinks` in `<SignedOut>` component
  - Wrap `productLinks` in `<SignedIn>` component
  - Keep existing `SignedIn`/`SignedOut` button section (UserButton, Sign In, Get Started)
  - Remove redundant "Dashboard" button when logged in (Dashboard is now a nav link)
- Update mobile nav section:
  - Same auth-contextual link rendering for hamburger menu
  - Preserve existing mobile button section
- Handle edge cases:
  - Auth state changes (login/logout) should update nav links without page reload
  - Active route highlighting should work for both link sets
  - Subscription tier could affect which product links are visible (future consideration)
- Ensure styling consistency:
  - Same link styles for both marketing and product links
  - Active state indicator for current route
  - Hover effects preserved

tests:
- Unit: Navbar renders correct links for signed-out state
- Unit: Navbar renders correct links for signed-in state
- Integration: Navbar updates links on auth state change without reload
- Integration: Desktop and mobile menus both show correct links
- Integration: All nav links navigate to correct routes

acceptance_criteria:
- Logged-out users see: Features, Pricing, Blog in desktop and mobile nav
- Logged-in users see: Dashboard, DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers in desktop and mobile nav
- Logged-in users still see: UserButton, RealtimeIndicator, theme toggle
- Logged-out users still see: Sign In, Get Started buttons, theme toggle
- Auth state changes (login/logout) update nav links without full page reload
- Active route highlighting works for all nav links
- Mobile hamburger menu shows correct links based on auth state
- No console errors or warnings

validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/`
- Test logged-out state: verify marketing links appear (Features, Pricing, Blog)
- Sign in and verify product links appear (Dashboard, DarkWatch, VoicePrint, etc.)
- Sign out and verify marketing links reappear
- Test mobile menu: toggle hamburger and verify correct links for current auth state
- Click each nav link and verify it navigates to the correct route
- Verify active route highlighting works

notes:
- Clerk's `SignedIn`/`SignedOut` components handle auth state reactively
- Current navbar already uses `SignedIn`/`SignedOut` for button section — extend same pattern to nav links
- Dashboard sidebar (`/web/src/components/dashboard/Sidebar.tsx`) has the product link structure to reference
- Product links should match dashboard sidebar: Overview, DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Settings
- Consider whether Settings should be in navbar or only in sidebar (recommend: keep Settings in sidebar only)
- If user's subscription doesn't include a product, consider graying out or hiding that link (future enhancement)
- Mobile menu should close after clicking a nav link (already implemented)