Kordant/tasks/landing-pages-and-admin/06-auth-contextual-navbar.md

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)