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. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughNavbar was refactored to use ChangesNavbar NavLink & Mobile Drawer
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
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)
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.
mehul-m-prajapati
added
level:intermediate
quality:clean
type:accessibility
and removed
gssoc26
labels
|
@yuvraj-k-singh : remove Features menu as it is not required |
Signed-off-by: yuvraj-k-singh <yuvrajstudentbussiness@gmail.com>
I wanted to let you know that I have completed the navbar updates. The 'Features' section and its corresponding URL hash-scrolling logic have been completely removed from both the desktop and mobile views. |
|
🎉🎉 Thank you for your contribution! Your PR #237 has been merged! 🎉🎉 |
|
Sir please accept my request on linkedin, I want to connect with you. My profile link - https://www.linkedin.com/in/yuvraj-kumar-singh?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app |
2 participants
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