Enhance navbar hover effects and interactions#752
Conversation
|
@tanvi1107 is attempting to deploy a commit to the Karan Mani Tripathi 's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
CodeAnt AI is reviewing your PR. |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
github-actions
Bot
added
gssoc'26
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello there! 🎉 Thank you so much for your first pull request to DoubtDesk!
We really appreciate your contribution. A maintainer will review your code soon. If you are participating in GSSoC, ensure your PR is linked to an open issue. Please make sure you have followed all rules in our Contributing Guidelines. Happy coding!
There was a problem hiding this comment.
⭐ Star Required
Hi @tanvi1107! Thank you for your contribution to DoubtDesk.
Before we can complete the review and merge this pull request, please star the DoubtDesk repository.
Once you have starred the repository, please drop a comment here saying "done" and we will proceed with reviewing your PR. Thank you!
|
@coderabbitai review |
codeant-ai
Bot
added
the
size:L
github-actions
Bot
added
size/l
and removed
size:L
WalkthroughHeader.tsx now locks body scrolling while the mobile menu is open, closes it on Escape or route changes, and applies active-state, ARIA, and focus-visible styling across the desktop and mobile navigation, logo, and authenticated links. ChangesHeader navigation UX/accessibility refactor
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
|
Hi @knoxiboy ! I've implemented the requested navbar hover effect improvements and verified the changes locally. I'd appreciate it if you could review the PR and merge it if everything looks good. Thank you! |
|
CodeAnt AI finished reviewing your PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/components/Header.tsx (2)
87-90: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win
isActiveonly exact-matches paths — nested routes won't highlight.
pathname === hrefwon't mark/dashboardactive when the user is on/dashboard/settingsor similar sub-routes. Given the linked issue calls for "clear active-page highlighting," consider prefix matching for non-root paths.♻️ Possible refactor
const isActive = useCallback( - (href: string) => !href.startsWith("#") && pathname === href, + (href: string) => + !href.startsWith("#") && + (pathname === href || pathname.startsWith(`${href}/`)), [pathname] );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Header.tsx` around lines 87 - 90, The Header.tsx isActive helper only checks exact pathname matches, so nested routes under the same section won’t stay highlighted. Update the useCallback-based isActive logic to do prefix matching for non-root, non-hash links while preserving the root path behavior, and keep using pathname plus href inside the Header component to locate the change.
148-148: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueNew aria-label/id strings are hardcoded inline.
"Primary navigation","Toggle navigation menu","mobile-nav-panel","Mobile navigation"are all new literal strings. Per path instructions for.tsxfiles, prefer extracting user-facing/ARIA strings to shared constants for consistency and easier i18n later.Also applies to: 258-260, 277-277, 308-308
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Header.tsx` at line 148, The new ARIA labels and DOM id strings in Header are hardcoded inline, so move the literals used by the navigation controls into shared constants instead of embedding them directly in the JSX. Update the relevant Header.tsx elements referenced by aria-label and id, including the navigation menu toggle and mobile panel, and reuse the extracted constants anywhere those strings appear so the naming stays consistent and is easier to localize later.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Header.tsx`:
- Around line 221-234: Admin and Profile nav items in Header should use the same
active-state pattern as Dashboard, including aria-current and conditional
active/inactive styling. Update the Header component’s desktop and mobile link
rendering so Admin and Profile derive their active state from the current route
(via the same isActive logic used for Dashboard) and apply matching classes when
active. Keep the existing Link structure, but ensure all authenticated nav links
expose consistent current-page semantics and visual highlighting.
- Around line 276-282: Keep the closed mobile nav out of keyboard focus by
ensuring the `#mobile-nav-panel` in Header.tsx is truly inactive when isOpen is
false. Update the mobile nav container logic so its interactive descendants are
not tabbable while closed, either by adding inert to the panel or by
conditionally disabling/removing focusable children in the same Header component
where isOpen controls aria-hidden and the transform classes.
---
Nitpick comments:
In `@src/components/Header.tsx`:
- Around line 87-90: The Header.tsx isActive helper only checks exact pathname
matches, so nested routes under the same section won’t stay highlighted. Update
the useCallback-based isActive logic to do prefix matching for non-root,
non-hash links while preserving the root path behavior, and keep using pathname
plus href inside the Header component to locate the change.
- Line 148: The new ARIA labels and DOM id strings in Header are hardcoded
inline, so move the literals used by the navigation controls into shared
constants instead of embedding them directly in the JSX. Update the relevant
Header.tsx elements referenced by aria-label and id, including the navigation
menu toggle and mobile panel, and reuse the extracted constants anywhere those
strings appear so the naming stays consistent and is easier to localize later.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f5faaf7f-59f4-457a-b939-ceb929e982fd
📒 Files selected for processing (1)
src/components/Header.tsx
|
CodeAnt AI is running Incremental review |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
codeant-ai
Bot
added
the
size:L
|
can u merge the changes |
github-actions
Bot
added
size/l
and removed
size:L
|
CodeAnt AI Incremental review completed. |
|
@knoxiboy can u please merge it |
github-actions
Bot
added
the
merge-conflict
|
Hi! Thanks for working on this. We recently cleaned up our styling configurations and relocated some layouts, which has introduced merge conflicts in your changed files. Could you rebase this branch against main, resolve the conflicts, and update the PR? Thank you! |
2 participants
User description
Description
Enhanced the navigation bar by improving hover interactions and visual feedback. Added smooth hover animations to navigation items to create a more modern and engaging user experience while keeping the existing functionality unchanged.
Related Issue
Closes #738
Type of Change
Screenshots (if UI change)
How Has This Been Tested?
npm run devChecklist
npm run dev)anytypes)mainSummary by CodeRabbit
aria-currentstate).CodeAnt-AI Description
Improve header navigation clarity and mobile menu behavior
What Changed
Impact
✅ Easier navigation on desktop and mobile✅ Fewer stuck mobile menus✅ Clearer keyboard access to header actions💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.