fix: improve navbar responsiveness on mobile devices#298
Conversation
PR Context Summary
Suggested issue links
Use |
📝 WalkthroughWalkthroughAdds CSS to prevent horizontal overflow and a ChangesNavigation Responsiveness Styling
Sequence DiagramsequenceDiagram
participant User
participant NavBar
participant Router
participant DrawerPortal
User->>NavBar: click hamburger / nav link
NavBar->>DrawerPortal: open/close via isDrawerOpen
Router->>NavBar: pathname change event
NavBar->>NavBar: close drawer on pathname or Escape
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
ApprovabilityVerdict: Needs human review Unable to check for correctness in 5a9add2. This PR introduces a new mobile navigation drawer feature rather than just CSS responsiveness fixes. Adding new interactive UI components with state management, keyboard handlers, and React portals represents new user-facing functionality that warrants human review. You can customize Macroscope's approvability policy. Learn more. |
|
Hi, @Abhash-Chakraborty |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@frontend/src/app/layout.tsx`:
- Around line 26-28: The nav currently uses h-auto while layout shells rely on
the CSS variable --nav-height, causing mismatch on small screens; update the nav
and the CSS variable to share one source of truth by making --nav-height
responsive (define it with media queries or Tailwind responsive utilities) and
use that variable for the nav height instead of h-auto (replace h-auto with
h-[var(--nav-height)] on the <nav> in layout.tsx and add breakpoint rules that
set --nav-height to the intended values so container-shell calculations remain
correct).
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1572884f-4360-4769-904c-0182f3c3cd73
📒 Files selected for processing (3)
frontend/src/app/globals.cssfrontend/src/app/layout.tsxfrontend/src/components/NavBar.tsx
|
@Rohan-R07 Can you add hamburger menu for smaller screen size |
|
Thanks for the feedback. I will be implemented a hamburger menu for smaller screen sizes and I will be pushed the changes to this PR. Please let me know if any further adjustments are needed. |
|
@Rohan-R07 where is the commit? |
|
Sorry it was a mistake I will be making the commit soon |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/components/NavBar.tsx (1)
203-221: ⚡ Quick winConsider adding focus management and ARIA dialog semantics for accessibility.
The drawer lacks focus trap (users can tab to elements behind the overlay) and ARIA dialog semantics (
role="dialog",aria-modal="true"). This affects keyboard and screen reader users.♿ Suggested accessibility improvements
{/* Mobile & Tablet Drawer Content */} <div + role="dialog" + aria-modal="true" + aria-label="Navigation menu" className={`fixed right-0 top-0 z-[70] h-full w-[280px] border-l border-[var(--frost)] bg-[color:var(--void)] p-6 shadow-2xl transition-all duration-300 ease-in-out lg:hidden ${ isDrawerOpen ? "translate-x-0 visible" : "translate-x-full invisible pointer-events-none" }`} >For full focus trapping, consider using a library like
@radix-ui/react-dialogor adding a focus trap hook.🤖 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 `@frontend/src/components/NavBar.tsx` around lines 203 - 221, The drawer markup needs ARIA dialog semantics and focus management: when isDrawerOpen is true, add role="dialog" and aria-modal="true" on the container and implement a focus trap (or integrate a library such as `@radix-ui/react-dialog`) so tabbing cannot reach elements behind the overlay; ensure keyboard support by closing on Escape (handle in the same component using setIsDrawerOpen(false)), move initial focus into the dialog (e.g., the close button) when opened, and restore focus to the triggering element when closed; update the NavBar component to wire these behaviors around the existing isDrawerOpen and setIsDrawerOpen logic.
🤖 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.
Nitpick comments:
In `@frontend/src/components/NavBar.tsx`:
- Around line 203-221: The drawer markup needs ARIA dialog semantics and focus
management: when isDrawerOpen is true, add role="dialog" and aria-modal="true"
on the container and implement a focus trap (or integrate a library such as
`@radix-ui/react-dialog`) so tabbing cannot reach elements behind the overlay;
ensure keyboard support by closing on Escape (handle in the same component using
setIsDrawerOpen(false)), move initial focus into the dialog (e.g., the close
button) when opened, and restore focus to the triggering element when closed;
update the NavBar component to wire these behaviors around the existing
isDrawerOpen and setIsDrawerOpen logic.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0883302e-dceb-4748-87e4-130d78a02425
📒 Files selected for processing (3)
frontend/src/app/globals.cssfrontend/src/app/layout.tsxfrontend/src/components/NavBar.tsx
|
I have implemented the hamburger menu. Thank you! |
2 participants
Summary
Improved the application's navigation experience across mobile, tablet, and desktop devices.
Previously, the navigation bar remained in a desktop-style layout on smaller screens, resulting in overflow issues, limited accessibility, and reduced usability. This update introduces a responsive navigation system with a dedicated hamburger menu and slide-out drawer for tablet and mobile devices while preserving the existing desktop experience.
The implementation also resolves horizontal overflow issues, improves viewport handling, and ensures navigation remains accessible across different screen sizes.
Fixes #296
Type of change
What changed
Screenshots / recordings (for UI changes)
BEFORE THE FIX
AFTER THE FIX
How to test
Clone the repository and run the project locally.
Open the application in a browser.
Use Developer Tools responsive mode or resize the browser window.
Test common viewport sizes:
Verify that:
Checklist
GSSoC'26 Checklist