Skip to content

Fix/mobile menu resize bug#455

Open
pari-dubey1 wants to merge 3 commits into
komalharshita:mainfrom
pari-dubey1:fix/mobile-menu-resize-bug
Open

Fix/mobile menu resize bug#455
pari-dubey1 wants to merge 3 commits into
komalharshita:mainfrom
pari-dubey1:fix/mobile-menu-resize-bug

Conversation

@pari-dubey1
Copy link
Copy Markdown

Summary [required]

This PR fixes a responsive navigation issue where the mobile hamburger menu remained open when resizing the browser window from mobile view to desktop view. This caused both the mobile and desktop navigation menus to appear simultaneously.

The fix adds a resize listener that automatically closes and resets the mobile navigation state once the viewport crosses the desktop breakpoint, ensuring consistent responsive behaviour across screen sizes.

Additionally, while testing and debugging the issue, several unintended JavaScript syntax and duplicated logic issues in script.js were identified and cleaned up to restore proper functionality of the navbar and overall client-side interactions.


Related Issue [required]

Closes #285


Type of Change [required]

  • Bug fix — resolves a broken behaviour
  • Feature — adds new functionality
  • Data — adds new projects to data/projects.json
  • Documentation — updates docs, README, or code comments only
  • Style — CSS or visual changes only, no logic change
  • Refactor — restructures code without changing behaviour
  • Test — adds or updates tests

What Was Changed [required]

File Change made
static/js/script.js Added resize event listener to automatically close mobile navbar on desktop resize
static/js/script.js Removed duplicated form submission blocks causing JavaScript parsing issues
static/js/script.js Cleaned duplicated renderResults() conditional logic
static/js/script.js Fixed broken/mismatched braces and syntax issues preventing navbar functionality

How to Test This PR [required]

  1. Clone this branch:

    git checkout fix/mobile-menu-resize-bug
  2. Install dependencies:

    pip install -r requirements.txt
  3. Run the app:

    python app.py
  4. Open:

    http://127.0.0.1:5000
    
  5. Open browser responsive/mobile mode

  6. Set viewport to mobile width

  7. Open the hamburger menu

  8. Resize the browser window to desktop width

  9. Verify that:

    • the mobile menu automatically closes
    • only the desktop navbar remains visible
    • no duplicate navigation menus appear
  10. Run tests:

python tests/test_basic.py

Expected result:

All tests should pass successfully.

Test Results [required]

paste output here

Screenrecording

Screen.Recording.2026-05-22.144304.mp4

Self-Review Checklist [required]

  • I have read CONTRIBUTING.md and followed all guidelines
  • My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
  • I have run python tests/test_basic.py
  • I have run flake8 . locally and there are no errors
  • I have not introduced any print() or console.log() debug statements
  • Every new function I wrote has a docstring
  • I have not modified files outside the scope of the linked issue
  • If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)
  • If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

While implementing the responsive navbar fix, some pre-existing duplicated JavaScript blocks and syntax inconsistencies in script.js were discovered that prevented the navbar interactions from functioning correctly. These were cleaned up to restore stable client-side behaviour and ensure accurate testing of the assigned issue.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

@pari-dubey1 is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Mobile Hamburger Menu Does Not Close After Resizing to Desktop View

1 participant