mostly android

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

@@ -0,0 +1,76 @@
+# 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)