[fix] : Adjusted the Menu DropDown the Navigation Top Bar by Yashwanth1906 · Pull Request #1712 · json-schema-org/website

Yashwanth1906 · 2025-06-15T09:11:18Z

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:

In the components/Layout.tsx , I have wrapped the component inside a div and applied some css changes in it.
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 · 2025-06-15T09:11:27Z

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 · 2025-06-15T09:12:05Z

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 · 2025-06-15T09:13:31Z

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

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

codecov · 2025-06-15T09:14:51Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ 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

☔ 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.

Yashwanth1906 · 2025-06-15T09:16:39Z

@benjagm @idanidan29 Can u review this PR?

Yashwanth1906 · 2025-06-19T13:32:19Z

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

Utkarsh-123github · 2025-06-19T13:39:30Z

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 · 2025-06-20T03:12:19Z

@Utkarsh-123github Okay fine.

Utkarsh-123github · 2025-06-28T03:57:23Z

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 : #1518

Yashwanth1906 · 2025-06-28T04:07:56Z

@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 · 2025-06-28T04:11:12Z

@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 · 2025-06-28T06:40:00Z

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 · 2025-06-28T06:44:46Z

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 · 2025-06-28T06:50:35Z

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

Utkarsh-123github · 2025-06-28T07:45:56Z

No worries at all, thanks for fixing it! 🙌

Utkarsh-123github · 2025-06-28T08:14:24Z

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

Utkarsh-123github

Please refer to the attached video and try to fix it. Thank you!

sonu-ind-dev · 2025-10-27T19:56:29Z

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 · 2025-10-29T06:27:23Z

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

github-actions · 2025-10-29T06:36:31Z

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 · 2025-10-29T07:09:50Z

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.

[feat] : Done with Top bar menu handling and scroll lock

github-actions · 2025-10-29T11:17:13Z

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 · 2025-10-29T12:03:16Z

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

Yashwanth1906 · 2025-10-29T12:56:08Z

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 · 2025-10-29T12:57:18Z

@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 · 2025-10-29T16:33:29Z

@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 · 2025-10-30T02:18:30Z

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

[fix]: Lint fixed

…906/website into Top-bar-menu-mobile-dimension

github-actions · 2025-10-31T09:56:28Z

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 · 2025-10-31T10:04:31Z

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

Bhumikagarggg · 2025-11-17T20:09:49Z

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

Yashwanth1906 · 2025-11-18T02:38:52Z

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

Yashwanth1906 · 2025-11-19T07:18:47Z

@Utkarsh-123github Review this PR if u are free.🙂

AgniveshChaubey

I haven’t reviewed the entire change yet, but I’ve added few comments. In general, I’ve noticed that mobile navbars usually overlay the content rather than push it down.

AgniveshChaubey · 2026-01-11T09:10:04Z

components/Layout.tsx

+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };


Instead of hardcoding the overflow value to unset, we should save the previous value and restore it.

AgniveshChaubey · 2026-01-11T09:12:37Z

components/Layout.tsx

+          <div ref={mobileNavRef}>{showMobileNav && <MobileNav />}</div>
+          <div
+            className={`transition-all duration-300 ${
+              showMobileNav ? 'mt-[200px]' : 'mt-0'


We should avoid hardcoding the margins. This could break the UI if the navbar’s style changes or nav items are added or removed

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

22800e5

Yashwanth1906 requested a review from a team as a code owner June 15, 2025 09:11

github-actions bot added the needs-info label Jun 15, 2025

github-actions bot deployed to Preview June 15, 2025 09:13 View deployment

Utkarsh-123github added this to PR - Triage Group Jun 19, 2025

Utkarsh-123github moved this to Unclear in PR - Triage Group Jun 19, 2025

Utkarsh-123github moved this from Unclear to Ready to review in PR - Triage Group Jun 19, 2025

Utkarsh-123github requested changes Jun 28, 2025

View reviewed changes

Utkarsh-123github moved this from Ready to review to Changes requested in PR - Triage Group Jun 28, 2025

Merge branch 'json-schema-org:main' into Top-bar-menu-mobile-dimension

fc745db

github-actions bot deployed to Preview October 29, 2025 06:38 View deployment

Yashwanth1906 and others added 6 commits October 29, 2025 15:03

[feat] : Adjusted the Top bar menu toggle

b45dbeb

[feat] : Syncronized the top menu bar and the sidebar

3f92289

[feat] : Scroll lock implied

26df7fe

[fix] : Lint not fixed

0131cc2

Merge branch 'Top-bar-menu-mobile-dimension' into main

b514fc7

[feat] : Done with Top bar menu handling and scroll lock

d268fa5

[feat] : Done with Top bar menu handling and scroll lock

Yashwanth1906 added 2 commits October 31, 2025 15:15

[fix] : Lint fixed

6be2b1a

[fix]: Lint fixed

Merge branch 'Top-bar-menu-mobile-dimension' of github.com:Yashwanth1…

ed2ee7f

…906/website into Top-bar-menu-mobile-dimension

github-actions bot deployed to Preview October 31, 2025 09:58 View deployment

AgniveshChaubey reviewed Jan 11, 2026

View reviewed changes

AgniveshChaubey mentioned this pull request Jan 11, 2026

In mobile view navbar hiding issue fixed #2084

Open

Uh oh!

Conversation

Yashwanth1906 commented Jun 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 15, 2025

Uh oh!

github-actions bot commented Jun 15, 2025

Uh oh!

github-actions bot commented Jun 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Uh oh!

codecov bot commented Jun 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Yashwanth1906 commented Jun 15, 2025

Uh oh!

Yashwanth1906 commented Jun 19, 2025

Uh oh!

Utkarsh-123github commented Jun 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Yashwanth1906 commented Jun 20, 2025

Uh oh!

Utkarsh-123github commented Jun 28, 2025

Uh oh!

Yashwanth1906 commented Jun 28, 2025

Uh oh!

Utkarsh-123github commented Jun 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 28, 2025

Uh oh!

github-actions bot commented Jun 28, 2025

Uh oh!

Yashwanth1906 commented Jun 28, 2025

Uh oh!

Utkarsh-123github commented Jun 28, 2025

Uh oh!

Utkarsh-123github commented Jun 28, 2025

Uh oh!

Utkarsh-123github left a comment

Choose a reason for hiding this comment

Uh oh!

sonu-ind-dev commented Oct 27, 2025

Uh oh!

Yashwanth1906 commented Oct 29, 2025

Uh oh!

github-actions bot commented Oct 29, 2025

Uh oh!

sonu-ind-dev commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 29, 2025

Uh oh!

sonu-ind-dev commented Oct 29, 2025

Uh oh!

Yashwanth1906 commented Oct 29, 2025

Uh oh!

Yashwanth1906 commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonu-ind-dev commented Oct 29, 2025

Uh oh!

Utkarsh-123github commented Oct 30, 2025

Uh oh!

github-actions bot commented Oct 31, 2025

Uh oh!

Yashwanth1906 commented Oct 31, 2025

Uh oh!

Bhumikagarggg commented Nov 17, 2025

Uh oh!

Yashwanth1906 commented Nov 18, 2025

Uh oh!

Yashwanth1906 commented Nov 19, 2025

Uh oh!

AgniveshChaubey left a comment

Yashwanth1906 commented Jun 15, 2025 •

edited

Loading

github-actions bot commented Jun 15, 2025 •

edited

Loading

codecov bot commented Jun 15, 2025 •

edited

Loading

Utkarsh-123github commented Jun 19, 2025 •

edited

Loading

Utkarsh-123github commented Jun 28, 2025 •

edited

Loading

sonu-ind-dev commented Oct 29, 2025 •

edited

Loading

Yashwanth1906 commented Oct 29, 2025 •

edited

Loading