feat(header): update header actions and add dashboard link#73
Conversation
- remove ThemeToggleButton from site header - add dashboard user icon linking to /dashboard for authenticated users - refine header auth actions for desktop and mobile
✅ Deploy Preview for develop-devlovers ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThis PR consolidates navigation link definitions into a centralized module ( Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
frontend/lib/navigation.ts (1)
1-9: Consider adding an explicit type definition.While
as constprovides literal typing, defining an explicit interface would improve type safety and serve as documentation for the link structure.🔎 Suggested type definition
+export interface SiteLink { + href: string; + label: string; +} + -export const SITE_LINKS = [ +export const SITE_LINKS: readonly SiteLink[] = [ { href: '/q&a', label: 'Q&A' }, { href: '/quiz/react-fundamentals', label: 'Quiz' }, { href: '/leaderboard', label: 'Leaderboard' }, { href: '/blog', label: 'Blog' }, { href: '/about', label: 'About' }, { href: '/contacts', label: 'Contacts' }, { href: '/shop', label: 'Shop' }, ] as const;frontend/components/header/SiteHeader.tsx (1)
62-71: LGTM! Mobile dashboard link mirrors desktop implementation.The mobile dashboard link correctly replicates the desktop version with appropriate accessibility attributes and styling.
💡 Optional: Extract dashboard link to reduce duplication
The dashboard link is duplicated between desktop (lines 36-45) and mobile (lines 62-71) sections. Consider extracting it:
const DashboardLink = () => ( <Link href="/dashboard" aria-label="Dashboard" title="Dashboard" className="inline-flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground" > <User className="h-5 w-5" /> </Link> );Then use
{userExists && <DashboardLink />}in both sections.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/components/header/SiteHeader.tsx(3 hunks)frontend/components/header/SiteMobileHeader.tsx(2 hunks)frontend/lib/navigation.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
frontend/lib/navigation.ts (2)
frontend/components/shop/header/nav-links.tsx (3)
NavLinks(31-62)NavLinksProps(25-29)link(36-50)frontend/components/shop/shop-header.tsx (1)
Header(14-61)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - develop-devlovers
- GitHub Check: Header rules - develop-devlovers
- GitHub Check: Pages changed - develop-devlovers
🔇 Additional comments (5)
frontend/components/header/SiteMobileHeader.tsx (2)
3-3: LGTM! Good refactor to centralize navigation links.Importing SITE_LINKS from a shared module eliminates duplication and ensures consistency across header components.
34-34: LGTM! Icon size consistency improvement.Aligning the Menu icon size (h-5 w-5) with the X icon ensures a smooth visual transition when toggling the mobile menu.
frontend/components/header/SiteHeader.tsx (2)
3-4: LGTM! Import changes support the refactoring.Centralizing SITE_LINKS and importing the User icon for the new dashboard link are appropriate changes.
36-45: LGTM! Dashboard link implementation is solid.The conditional dashboard link for authenticated users is well-implemented with:
- Appropriate accessibility attributes (aria-label, title)
- Consistent styling and icon sizing
- Proper conditional rendering based on userExists
frontend/lib/navigation.ts (1)
2-2: The '/q&a' route is properly configured and functional. The route exists atfrontend/app/[locale]/q&a/page.tsxand is consistently referenced throughout the codebase in navigation, components, and routing logic. Next.js handles the ampersand character correctly in this context without issues.
| @@ -0,0 +1,9 @@ | |||
| export const SITE_LINKS = [ | |||
| { href: '/q&a', label: 'Q&A' }, | |||
| { href: '/quiz/react-fundamentals', label: 'Quiz' }, | |||
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for quiz-related routes and structure
# Check what quiz routes exist in the frontend
echo "=== Quiz routes/pages ==="
find frontend -type d -name "quiz" 2>/dev/null
echo -e "\n=== Quiz page files ==="
find frontend -path "*quiz*" -name "page.tsx" -o -path "*quiz*" -name "page.ts" 2>/dev/null | head -20
echo -e "\n=== Quiz directory structure ==="
find frontend/app -type d -name "quiz" -exec find {} -type f \; 2>/dev/null | head -30Repository: DevLoversTeam/devlovers.net
Length of output: 436
🏁 Script executed:
#!/bin/bash
# Check the quizzes listing page content
echo "=== Checking /quizzes page ==="
head -50 frontend/app/\[locale\]/quizzes/page.tsx
echo -e "\n=== Check if there's a general /quiz route ==="
ls -la frontend/app/\[locale\]/quiz/ 2>/dev/null | head -20
echo -e "\n=== Check navigation.ts content ==="
cat frontend/lib/navigation.tsRepository: DevLoversTeam/devlovers.net
Length of output: 2392
Update Quiz link to point to the quiz listing page instead of a specific quiz.
The Quiz navigation currently links directly to /quiz/react-fundamentals, which bypasses the quiz listing page at /quizzes. Change the href to /quizzes to allow users to browse all available quizzes before selecting one.
🤖 Prompt for AI Agents
In frontend/lib/navigation.ts around line 3, the navigation entry currently
links to a specific quiz path (/quiz/react-fundamentals) instead of the quiz
listing page; update the href value to point to /quizzes so the "Quiz" nav item
routes users to the quiz listing page rather than directly to a single quiz.
feat(header): update header actions and add dashboard link
2 participants
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.