Skip to content

feat: highlight active navigation item in navbar#446

Merged
dev-fatima-24 merged 1 commit into
dev-fatima-24:mainfrom
Vera3289:feat/active-nav-highlight
Jun 1, 2026
Merged

feat: highlight active navigation item in navbar#446
dev-fatima-24 merged 1 commit into
dev-fatima-24:mainfrom
Vera3289:feat/active-nav-highlight

Conversation

@Vera3289
Copy link
Copy Markdown
Contributor

@Vera3289 Vera3289 commented Jun 1, 2026

Summary

Resolves #234

The navbar now visually highlights the currently active route so users always know which page they're on.

Changes

  • NavBar.jsx – active link receives accent color, bold font weight, and a bottom border underline, driven by useLocation pathname comparison

Acceptance Criteria

  • Active nav item has a distinct visual style (accent color + underline)
  • Active state updates immediately on route change (driven by useLocation)
  • Active state is driven by the current route, not manual state
  • Active item has aria-current="page" attribute (already present, preserved)
  • Style uses var(--accent) CSS variable — consistent in both light and dark modes

- Active link gets accent color, bold weight, and bottom border underline
- Driven by useLocation pathname comparison (route-based, not manual state)
- aria-current="page" already present; active style updates immediately on route change
- Inline style approach consistent with project conventions; accent color works in both light and dark modes

Closes dev-fatima-24#234
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 1, 2026

@Vera3289 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

@dev-fatima-24 dev-fatima-24 merged commit 539452d into dev-fatima-24:main Jun 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FRONTEND] Highlight active navigation item in sidebar/navbar

2 participants