[fix] : Adjusted the Menu DropDown the Navigation Top Bar

[Yashwanth1906]

What kind of change does this PR introduce?

🐛 Bugfix — fixes the scroll lock and layout shift issue when opening the navigation menu on mobile view.

Issue Number:

Closes #1578

Screenshots/videos:

N/A (functional CSS-level fix; visual change is subtle and responsive)

If relevant, did you update the documentation?

Not applicable — no changes required to documentation.

Summary

This PR resolves the issue when the top bar is menu is opened in mobile dimension the content of the page is getting hidden. More Detail Issue Description: #1578.

Fix implemented:

1. In the components/Layout.tsx , I have wrapped the <MainNavLink/> component inside a div and applied some css changes in it.
2. And also in the useEffect hook added the body.style.overflow logic according to whether it is in mobile dimension.

Does this PR introduce a breaking change?

No breaking changes — the fix is isolated to the responsive mobile layout.

[github-actions[bot]]

Hi @Yashwanth1906! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions[bot]]

Hi @Yashwanth1906! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions[bot]]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 100.00%. Comparing base (4e1e90a) to head (ed2ee7f).

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1712   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           30        30           
  Lines          633       633           
  Branches       196       196           
=========================================
  Hits           633       633           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Yashwanth1906]

@benjagm @idanidan29 Can u review this PR?

[Yashwanth1906]

@Utkarsh-123github Can I know what is unclear in this PR? So that I can make changes accordingly..

[Utkarsh-123github]

Hey @Yashwanth1906 , this PR is completely fine, actually I was adding the PRs to the PR board, so for the initial step I need to add all the PRs to unclear stage and then to Ready to review status. I'll make the changes by the EOD.

[Yashwanth1906]

@Utkarsh-123github Okay fine.

[Utkarsh-123github]

Hi @Yashwanth1906 , I observed that you have raised 2 different PRs for the same issue. Could you please close one of the PR which is outdated, so that PR reviewing could be easier and duplication is avoided. This is the other PR which I am talking about : https://github.com/json-schema-org/website/pull/1518

[Yashwanth1906]

@Utkarsh-123github This PR is about fixing the top bar issue #1578 . and the #1518 is about fixing the sidebar toggle. Both are different issues.

[Utkarsh-123github]

@Yashwanth1906 but you have mentioned in both the PR description the same issue #1484 . I guess you have tagged the wrong issue, kindly update the PR description.

[github-actions[bot]]

Hi @Yashwanth1906! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions[bot]]

Hi @Yashwanth1906! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[Yashwanth1906]

@Utkarsh-123github I have updated the PR description. Btw, sry for the wrong pr description.

[Utkarsh-123github]

No worries at all, thanks for fixing it! 🙌

[Utkarsh-123github]

Hey @Yashwanth1906 , you've done a great job ! But I have observed a bug here in your PR, please refer to this video in which I have described about it and try to fix it. Thank You!

https://github.com/user-attachments/assets/994f499d-3163-45ef-b070-67daee1cee65

[sonu-ind-dev]

Hey @Yashwanth1906 , you've done a great job ! But I have observed a bug here in your PR, please refer to this video in which I have described about it and try to fix it. Thank You!

2025-06-28.13-31-00.mp4

@Yashwanth1906 has done a great job here. I’ve reviewed the code, and I noticed @Utkarsh-123github that point mentioned in the video still needs to be addressed. I’m not sure why there hasn’t been a response yet, but that’s okay.

If you’d like @Utkarsh-123github , I can provide fixes for the issues you pointed out, directly in this PR. Please let me know if that works for you.

[Yashwanth1906]

sorry for the late response @Utkarsh-123github I had my semesters . I'll fix this by this weekend. @sonu-ind-dev

[github-actions[bot]]

Hi @Yashwanth1906! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[sonu-ind-dev]

sorry for the late response @Utkarsh-123github I had my semesters . I'll fix this by this weekend. @sonu-ind-dev

Fine @Yashwanth1906, I’m new here and looking for some guidance from your side. Please let me know if there’s any area or task where I can contribute. I have around 2 years of experience as a Full Stack Developer, so you can assign something aligned with that background.

[github-actions[bot]]

Hi @Yashwanth1906! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[sonu-ind-dev]

@Yashwanth1906 Why I am getting option to approve your PR. Can you please explain me about this.

[Yashwanth1906]

sorry for the late response @Utkarsh-123github I had my semesters . I'll fix this by this weekend. @sonu-ind-dev

Fine @Yashwanth1906, I’m new here and looking for some guidance from your side. Please let me know if there’s any area or task where I can contribute. I have around 2 years of experience as a Full Stack Developer, so you can assign something aligned with that background.

I would suggest you to look into the issues that have good first issue tag and try to work on those issues.

[Yashwanth1906]

@Yashwanth1906 Why I am getting option to approve your PR. Can you please explain me about this.

Everyone has the option to review others pr but we won't have the rights to merge them.

@sonu-ind-dev I would suggest u to join json schema slack and post ur doubts over there. 🙂

[sonu-ind-dev]

@Yashwanth1906 Why I am getting option to approve your PR. Can you please explain me about this.

Everyone has the option to review others pr but we won't have the rights to merge them.

@sonu-ind-dev I would suggest u to join json schema slack and post ur doubts over there. 🙂

Ok @Yashwanth1906 , Thanks for the suggestions & guidance.

[Utkarsh-123github]

Hi @Yashwanth1906 , your PR is failing checks, please make the necessary changes and fix it. Thank you !!

[github-actions[bot]]

Hi @Yashwanth1906! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: kind of change description

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[Yashwanth1906]

@Utkarsh-123github I have Closed the #1518 PR and I have solved the #1484 In this PR itself. Waiting for ur review..

[Bhumikagarggg]

hello @Yashwanth1906 , you need to first clear the failed check!

[Yashwanth1906]

@Bhumikagarggg @Utkarsh-123github Is it necessary to Pass the PR Validation Check?? Other Important Checks seems to be good.🙂