Skip to content

fix: improve mobile navbar responsiveness#87

Open
Anusmita12 wants to merge 1 commit into
kunalverma2512:mainfrom
Anusmita12:fix/mobile-navbar-overflow
Open

fix: improve mobile navbar responsiveness#87
Anusmita12 wants to merge 1 commit into
kunalverma2512:mainfrom
Anusmita12:fix/mobile-navbar-overflow

Conversation

@Anusmita12
Copy link
Copy Markdown

@Anusmita12 Anusmita12 commented May 24, 2026 •
edited by coderabbitai Bot
Loading

Summary

Improved mobile navbar responsiveness and scrolling behavior on smaller devices.

Closes #38

Changes

  • Fixed mobile menu overflow and scrolling issues
  • Added body scroll lock when navbar is open
  • Reduced cramped spacing in nested accordion sections
  • Improved responsiveness for narrow screen widths
  • Restored missing Logout border styling
  • No changes made to the desktop layout/design

Tested On

  • iPhone SE
  • Galaxy S8
    Tested via Chrome DevTools.
codelens.mp4

Summary by CodeRabbit

  • New Features

    • Enhanced "Tools" mega menu with refined layout, new header, and two-column grid display
    • Reorganized mobile menu with scrollable content container and pinned authentication section at bottom

  • Bug Fixes

    • Fixed mobile scroll locking when menu is open
    • Menu now properly closes on route navigation

  • Style

    • Updated mega menu styling with thinner top accent
    • Replaced desktop user identity chip with GitHub link in authentication UI

Review Change Stack

Copilot AI review requested due to automatic review settings May 24, 2026 15:52
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 24, 2026

🚀 PR Received Successfully

Hello @Anusmita12,

Thank you for taking the initiative to contribute to this project.

Please ensure that your PR follows all project guidelines properly before requesting review.

⚠️ Important Instructions

  • Maintain proper code quality and structure
  • Do not make unnecessary changes/files
  • Ensure responsiveness across devices
  • Follow existing project conventions strictly
  • Attach screenshots/videos for UI-related changes
  • Resolve merge conflicts before requesting review
  • Avoid AI-generated low quality PRs or copied implementations

📌 Mandatory for GSSoC'26 Participants

Joining the community group and announcement channel is compulsory for all contributors participating through GSSoC'26.

Failure to follow contribution guidelines may lead to PR rejection.

We appreciate your effort and wish you a great open-source journey ahead. ✨

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 24, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 94a240aa-5589-4be0-9dca-662da73954d3

📥 Commits

Reviewing files that changed from the base of the PR and between 47f72c6 and 7f2bafa.

📒 Files selected for processing (1)
  • frontend/src/components/shared/Navbar.jsx
📝 Walkthrough

Walkthrough

The PR refines the Navbar component by enhancing the "Tools" mega-menu panel with a new header and layout, centralizing state effects for scroll and route-triggered menu closure, updating desktop right controls to show a GitHub link for authenticated users, and restructuring the mobile menu with a scrollable container and pinned auth section.

Changes

Navbar Refinement: Mega Menu, State Management, and Mobile Restructuring

Layer / File(s) Summary
Navbar Effects and State Management
frontend/src/components/shared/Navbar.jsx		 Scroll listener effect sets navbar elevation state with passive event listeners; route changes close both desktop and mobile menus; mobile menu open state locks/unlocks body scroll; mega-menu hover handling clears existing timeouts on enter, opens menu, refocuses first item, and schedules delayed close on leave.
Mega Menu Panel Layout and Content
frontend/src/components/shared/Navbar.jsx		 TAG_COLORS baseline for badge styling; MegaMenuPanel header includes thinner top accent and "AI-Powered Tools — GSSoC '26" label; conditional rendering detects hasSubmenu and renders either a dark parent header with nested submenu Link items (each closes navbar), or standard entries using Link/div wrappers with firstMenuItemRef for focus management on "Practice CP"; footer "More tools shipping soon" + "View All →" strip is retained.
Desktop Navbar Layout and Right Controls
frontend/src/components/shared/Navbar.jsx		 Active-link styling helpers drive underline/hover behavior; CODELENS wordmark link and center navigation block are reflowed; Tools mega-menu trigger implements toggling and focus management; right controls section replaces authenticated user identity chip with a GitHub link while preserving the Logout button, and unauthenticated view renders Login link.
Mobile Menu Restructuring and Auth Section
frontend/src/components/shared/Navbar.jsx		 Mobile menu restructures into a maxHeight-constrained scrollable container with touch-friendly scrolling (overscroll-contain, WebkitOverflowScrolling); Tools accordion toggles submenu expansion and renders expanded submenu Link rows; standard tool rows use Link/div wrapper choice with closeMenu prop applied for navigation; mobile auth section converts to a pinned-bottom block separated by top border below scrollable tools list; prior user identity row styling is removed while GitHub and Logout links/buttons remain in the pinned structure.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • kunalverma2512/CodeLens#73: Prior refactor of Navbar.jsx mega-menu structure, open/close interaction logic, and mobile menu behavior that this PR likely builds upon or supersedes.
  • kunalverma2512/CodeLens#52: Overlaps with mega-menu trigger and panel markup/interaction changes in the same Navbar "Tools" components.

Suggested labels

enhancement, Frontend, responsive, UI/UX, level:intermediate, type:accessibility, type:refactor, quality:clean

Poem

🐰 A navbar blooms with tools so bright,
Mobile menus scroll just right,
Auth buttons dance at the bottom stay,
While mega menus light the way,
Desktop gleams with GitHub's glow! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title is concise and directly related to the primary objective of improving mobile navbar responsiveness, matching the main focus of the changeset.
Linked Issues check ✅ Passed The changes implement all key requirements from issue #38: improved scrolling behavior in mobile menu, body scroll locking, pinned auth section, accordion structure for nested items, and preserved desktop layout.
Out of Scope Changes check ✅ Passed All changes are scoped to mobile navbar improvements. Desktop 'right controls' changes appear incidental to auth section restructuring, but do not introduce out-of-scope functionality.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ 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

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

Copilot AI reviewed May 24, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR improves the mobile navigation experience by making the mobile menu scrollable within the viewport, pinning the auth section to the bottom, and preventing background page scroll while the mobile menu is open.

Changes:

  • Add body scroll locking while the mobile menu is open.
  • Refactor mobile menu layout to use a constrained, scrollable content region with a pinned auth section.
  • Minor cleanup/formatting (comment removals, indentation).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread frontend/src/components/shared/Navbar.jsx
Comment on lines +260 to +268
// ── Lock body scroll when mobile menu is open ────────────────────────────
useEffect(() => {
return () => {
clearTimeout(megaLeaveTimer.current);
};
}, []);
if (isMenuOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
return () => { document.body.style.overflow = ""; };
}, [isMenuOpen]);
Comment thread frontend/src/components/shared/Navbar.jsx
Comment on lines +508 to +511
<div
className="lg:hidden w-full bg-white border-t border-zinc-100 flex flex-col min-h-0"
style={{ maxHeight: "calc(100svh - 3.5rem)", overflow: "hidden" }}
>
@Anusmita12 Anusmita12 mentioned this pull request May 24, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@magic-peach magic-peach Awaiting requested review from magic-peach

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Improve Mobile Navbar Usability and Prevent Overflow Issues

2 participants

@Anusmita12