feat: add active navigation state indicator (#383)

[khanavi272-spec]

🚀 Active Navigation State Indicator (#383)

📋 Overview

Implemented active navigation state so users can easily identify the current page.

---

✅ Changes Made

• Integrated usePathname() from Next.js for route detection
• Added active state styling for navigation links
• Added visual indicator (underline + color change)
• Implemented aria-current="page" for accessibility
• Improved route matching logic for nested routes
• Applied active state to both desktop and mobile navigation

---

🧪 Testing

• Verified active state works correctly on:
  • Home (/)
  • Events (/events)
  • Leaderboard (/leaderboard)
  • Docs (/docs)
  • Dashboard (/dashboard)
• Tested nested routes (e.g., /docs/xyz)
• Checked mobile menu active state behavior

---

♿ Accessibility

• Added aria-current="page" for screen readers
• Maintained keyboard navigation and focus behavior

---

📸 UI Improvements

• Active link highlighted with:
  • Bold text
  • Underline indicator (desktop)
  • Background highlight (mobile)

---

Closes #383

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
insight-arena-4rll	Ready	Preview, Comment	Mar 29, 2026 6:22am

[drips-wave]

@khanavi272-spec Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits