Improve Navbar UI/UX of the Website#237
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughThe Navbar component is refactored to use React Router hooks for active link highlighting and route-aware navigation, introduces a smooth-scroll handler for the features section, transitions mobile menu rendering to an animated drawer, and updates navigation links with new auth options. ChangesNavbar Router Integration and Mobile Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @yuvraj-k-singh for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/Navbar.tsx`:
- Around line 84-114: The theme and menu icon-only buttons in Navbar.tsx lack
accessible names and state; update the theme toggle (toggleTheme) button to
include an explicit accessible name (e.g., aria-label="Toggle theme" or a
visually hidden <span>) and a pressed/state hint if desired (aria-pressed or
role="switch"), and update the menu toggle button (which calls setIsOpen and
reads isOpen) to include aria-expanded={isOpen} and aria-controls pointing to
the mobile menu container ID plus an explicit aria-label (e.g.,
aria-label="Toggle navigation menu"); ensure the mobile menu element has a
matching id so screen readers can correlate the control with the collapsible
content.
- Around line 120-144: The mobile drawer is hidden visually but still
keyboard-focusable when isOpen is false; update the drawer container and its
interactive children so they are ignored by assistive tech and keyboard
navigation when closed: add aria-hidden={!isOpen} to the wrapping div, and set
tabIndex={isOpen ? 0 : -1} (or pass a focusable prop) on each interactive
element (MobileNavLink instances, the Features button that calls
scrollToFeatures, and the Link components for Login/Sign Up) so they cannot
receive focus when closed; ensure you still call setIsOpen(false) on each click
and optionally move focus to the hamburger control when closing.
- Around line 16-27: The timeout-based scroll in scrollToFeatures is flaky;
instead have scrollToFeatures call navigate("/", { replace: false, state:
undefined, hash: "#features" }) (or navigate("/#features")) when not on "/" and
directly call element.scrollIntoView({ behavior: "smooth" }) when on "/" , then
remove the setTimeout; add a useEffect in the Navbar component that watches
location.hash (from useLocation()) and when location.hash === "#features" finds
document.getElementById("features") and calls scrollIntoView({ behavior:
"smooth" }) so navigation-driven hashes trigger a reliable scroll after route
changes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
yuvraj-k-singh
left a comment
yuvraj-k-singh
left a comment
There was a problem hiding this comment.
All changes made, Please check.
1 participant
Related Issue
Description
I have updated the top menu (navbar) to make the website look more professional and easier to use. Here is what I did:
New Look: I made the menu look cleaner and "frosted" so it stands out nicely.
Logo and Name: I put back the CRL icon and made the "GitHub Tracker" name two colors so it looks sharp.
Sign Up Button: I added a blue "Sign Up" button so new users can join easily.
Better Scrolling: Now, when you click "Features," the page smoothly slides down to the features section.
Clearer Menus: I made it obvious which page you are currently on by adding a soft blue highlight.
Phone Friendly: I made sure the menu looks great and works perfectly on mobile phones.
How Has This Been Tested?
On my computer: I checked all the buttons and links to make sure they work.
On a phone: I tested the menu on different screen sizes to ensure it's easy to tap.
Scrolling: I made sure the "Features" link scrolls correctly even if you start from a different page.
Day & Night: I checked both light and dark modes to make sure everything is easy to read.
Screenshots (if applicable)
Before:
After:
Type of Change
Summary by CodeRabbit
New Features
Improvements