Skip to content

Conversation

vtushar06
Copy link
Contributor

What kind of change does this PR introduce?
Bugfix - Fixed mobile navigation overflow issue and improved accordion behavior

Issue Number:

Screenshots/videos:

  • Before fix: Navigation dropdowns were overflowing on mobile and multiple sections could be open simultaneously, causing layout issues.
Responsivenes.bug.on.Mobileview.port.mp4
  • After fix: Only one accordion section can be open at a time, preventing overflow and improving mobile UX.
Updated.Sidebar.mp4

If relevant, did you update the documentation?

  • No

Summary
This PR fixes the mobile responsiveness issue reported in #1797 where the left navigation drawer's dropdown menus were overflowing from their parent container on mobile devices, breaking the layout and negatively impacting user experience.

Key changes made:

  1. Fixed typo: Corrected pathWtihoutFragment to pathWithoutFragment throughout the component
  2. Improved accordion behavior: Implemented handleAccordion function to ensure only one navigation section can be open at a time
  3. Enhanced mobile UX: Prevents content overflow by closing other sections when a new one is opened

Does this PR introduce a breaking change?
No, this is a backward-compatible fix that only improves the existing navigation behavior without changing any APIs or interfaces.

Checklist

Please ensure the following tasks are completed before submitting this pull request.

@vtushar06 vtushar06 requested a review from a team as a code owner August 8, 2025 11:51
@github-project-automation github-project-automation bot moved this to Ready to review in PR - Triage Group Aug 8, 2025
Copy link

github-actions bot commented Aug 8, 2025

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
website ✅ Ready (View Log) Visit Preview 09e65a7

@vtushar06
Copy link
Contributor Author

Hii @benjagm & @Utkarsh-123github, can you please review this PR. Thanks

@Utkarsh-123github
Copy link
Member

Hi @vtushar06 , before I review this PR, it would be great if you please fix this failing check.
Thank you!

@vtushar06
Copy link
Contributor Author

yes @Utkarsh-123github, I tried fixing it, and can you help me out in fixing that.

Copy link

codecov bot commented Aug 8, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@e97ceb0). Learn more about missing BASE report.

Additional details and impacted files
@@           Coverage Diff            @@
##             main     #1811   +/-   ##
========================================
  Coverage        ?   100.00%           
========================================
  Files           ?        30           
  Lines           ?       633           
  Branches        ?       196           
========================================
  Hits            ?       633           
  Misses          ?         0           
  Partials        ?         0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@vtushar06
Copy link
Contributor Author

@Utkarsh-123github can you take a look into this, if in case any more changes required.

@idanidan29
Copy link
Collaborator

great job, LGTM👍

@vtushar06
Copy link
Contributor Author

Thanks @idanidan29👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Ready to review
Development

Successfully merging this pull request may close these issues.

🐛 Bug: Mobile Responsiveness Issue on json-schema-org/learn in navigation links
3 participants