77 lines
4.3 KiB
Markdown
77 lines
4.3 KiB
Markdown
# 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)
|