fix: add hover states to navbar links

[HarshalKushwaha0027]

Related Issue

• Closes: Bug Report: Missing Hover States on Navbar Links #582

---

Description

Added interactive hover states to the main navigation links (Tracker, Contributors, Login) to improve UX and accessibility.

Previously, inactive links lacked visual feedback on hover due to conflicting Tailwind text classes and missing dark mode hover rules. I refactored the navLinkStyles in Navbar.tsx to strictly apply hover:text-blue-600 and hover:bg-gray-50 (along with their respective dark: mode variants) only to the inactive state, resolving the conflict.

---

How Has This Been Tested?

• Ran the local development server (npm run dev).
• Verified hover text and background color transitions on all inactive tabs.
• Tested both Light Mode and Dark Mode to ensure contrast and consistency.

---

Screenshots

Recording.2026-05-28.015950.mp4

---

Type of Change

• Bug fix
• New feature
• Code style update
• Breaking change
• Documentation update

Summary by CodeRabbit

• Style
  • Updated navigation link hover styling to provide enhanced visual feedback for inactive menu items across light and dark modes.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	ad4e0b8
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a1754d5f26075000948c630
😎 Deploy Preview	https://deploy-preview-583--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR updates inactive navigation link styling in the Navbar component. Hover interactions now display text-blue-600 text color and bg-gray-50 background (with dark-mode variants), replacing the previous simpler inactive hover appearance.

Changes

Navbar Inactive Link Hover Styling

Layer / File(s)	Summary
Inactive nav link hover styling src/components/Navbar.tsx	The navLinkStyles inactive branch updates hover text color to hover:text-blue-600 and adds hover background styling (hover:bg-gray-50 plus dark-mode equivalents) for improved visual feedback.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related issues

• Bug Report: Missing Hover States on Navbar Links #582: Addresses the missing or insufficient hover state styling for inactive navbar links reported in that issue.

Possibly related PRs

• GitMetricsLab/github_tracker#282: Updates navbar hover styling for inactive/active link states with similar text-color and background changes.
• GitMetricsLab/github_tracker#237: Refactors navLinkStyles logic affecting inactive/hover styling in the same navbar component.
• GitMetricsLab/github_tracker#235: Modifies navbar link hover styling and background behavior via navLinkStyles in the same component.

Suggested labels

level:intermediate, type:accessibility, type:bug, quality:clean

Poem

A rabbit hops through nav so fine,
Hovers now with blue outline,
Gray backgrounds greet the weary eye,
Dark mode shines as time goes by. ✨🐰

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR claims to close #548, which reports a blank login screen due to missing ArrowLeft import, but the changes only modify Navbar hover states unrelated to the login error.	Review whether #548 is the correct linked issue. The PR changes do not address the ArrowLeft import error described in #548; verify the intended issue or add the missing login page fix.
Out of Scope Changes check	⚠️ Warning	The navbar hover state changes are unrelated to issue #548's ArrowLeft import error, representing a scope mismatch between stated objectives and actual code changes.	Either correct the linked issue to match the navbar changes or add the missing ArrowLeft import fix to address the stated issue #548.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: add hover states to navbar links' accurately describes the main change—adding hover styling to navbar links—and is clear and specific.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description covers all required template sections with relevant details about the changes, testing, and type of change classification.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉 Thank you @HarshalKushwaha0027 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines