Implemented responsive navbar with hamburger menu

[shubhsahu23]

Changes Made

• Added responsive hamburger menu
• Added mobile navigation drawer
• Improved tablet responsiveness
• Added accessibility attributes
• Fixed overflow issues

Screenshots

Desktop:


Mobile:


Tablet:

Closes #3

[Copilot]

Pull request overview

Implements a responsive top navigation bar that preserves access to key navigation links on mobile/tablet by introducing a hamburger toggle and a collapsible mobile menu, aligning with Issue #3’s accessibility and responsiveness goals.

Changes:

• Added hamburger toggle state + separate desktop/mobile nav rendering in TopNavBar.
• Added global overflow-x: hidden to prevent horizontal scrolling.
• Updated TypeScript config to suppress deprecation warnings; lockfile updated accordingly.

Reviewed changes

Copilot reviewed 2 out of 4 changed files in this pull request and generated 4 comments.

File	Description
tsconfig.json	Adds ignoreDeprecations compiler option.
src/app/globals.css	Adds global horizontal overflow suppression on html, body.
src/app/components/TopNavBar.tsx	Implements sticky responsive navbar with mobile toggle menu and updated styling/ARIA.
package-lock.json	Lockfile metadata updated (adds peer flags on multiple packages).

---

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

[shubhsahu23]

@sunilkumar2170 check this?

[sunilkumar2170]

Great work on the hamburger menu implementation! 🎉
Please fix these 2 small issues before I merge:

1. Accessibility Fix (High Priority)
   When mobile menu is closed, links should not be reachable via keyboard or screen readers. Please update like this:
   jsx<nav
   aria-hidden={!isOpen}
   tabIndex={isOpen ? 0 : -1}
   className={...}

2. overflow-x Fix (Medium Priority)
   Remove overflow-x: hidden from globals.css and apply it only to the specific navbar container instead.
   Fix these 2 things and I'll merge immediately! 💪"

[shubhsahu23]

@sunilkumar2170 updated fixed both the issues
1.Accessibility Fix (High Priority)
When mobile menu is closed, links should not be reachable via keyboard or screen readers. Please update like this:
jsx<nav
aria-hidden={!isOpen}
tabIndex={isOpen ? 0 : -1}
className={...}
overflow-x Fix (Medium Priority)
2.Remove overflow-x: hidden from globals.css and apply it only to the specific navbar container instead.