Skip to content

Add active navbar state indicator#128

Open
Arpit-200626 wants to merge 1 commit into
asheesh109:mainfrom
Arpit-200626:fix-navbar-active-state
Open

Add active navbar state indicator#128
Arpit-200626 wants to merge 1 commit into
asheesh109:mainfrom
Arpit-200626:fix-navbar-active-state

Conversation

@Arpit-200626

Copy link
Copy Markdown

📝 Description

Summary

Implemented an active navigation state indicator for the navbar to improve user experience and navigation clarity.

Changes Made

  • Added route-based active link detection using Next.js navigation hooks.

  • Highlighted the currently active navbar item with:

    • Underline
    • Emerald text color
    • Improved visual feedback
  • Applied the active state to both desktop and mobile navigation menus.

  • Preserved all existing hover effects, responsiveness, translations, and dark/light theme compatibility.


🔗 Related Issues

Closes #61


🎯 Type of Change

  • ✨ New feature (non-breaking)

✅ Testing

What testing was done?

  • Manual testing completed
  • Mobile tested
  • Verified in both Light and Dark themes

How to Test

npm install
npm run dev
  1. Start the development server.
  2. Navigate between pages such as Home, Calendar, Weather, Market Prices, Government Schemes, etc.
  3. Verify that the active page is highlighted with the active styling.
  4. Refresh the page and confirm the active indicator remains correct.
  5. Test on both desktop and mobile navigation.

📸 Screenshots

Before

  • Navbar links appeared identical with no indication of the active page.

After

  • Active page is highlighted with an emerald color and underline, providing clear navigation feedback.

🔍 Code Review Checklist

  • Code follows project style
  • No console logs added
  • No commented-out code
  • Existing functionality preserved
  • No performance regressions

📝 Documentation

  • Documentation update not required
  • README update not required
  • CHANGELOG update not required

🚀 Deployment

  • Production-ready
  • No database migrations required
  • No new environment variables added
  • No breaking changes introduced

📋 Additional Notes

This enhancement improves overall usability by giving users clear visual feedback about their current location within the application while maintaining the existing responsive design and theme support.
Screenshot 2026-06-26 140326

@vercel

vercel Bot commented Jun 26, 2026

Copy link
Copy Markdown

@Arpit-200626 is attempting to deploy a commit to the ashishparab03-gmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.

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.

[UI Enhancement]: Add active state indicator for current navbar page

1 participant