🐛 Bug: Scroll Lock Issue When Opening Navigation Component in Mobile View

[Yashwanth1906]

Describe the bug

On the mobile version of the application, below the top navigation bar, there is a secondary navigation bar that allows users to access different document sections. When clicking on this bar, a full-page component opens, covering the entire screen. However, users can still scroll the background page, leading to a confusing experience where they cannot properly see the content that lies behind the opened component.

Steps To Reproduce

Open the application on a mobile device.
Click on the secondary navigation bar (below the top navbar).
The navigation component expands to cover the screen.
Try scrolling while the component is open.
Notice that the background content scrolls, making it hard to focus on the active component.

Expected Behavior

✅ Scroll Locking: When the navigation component is open, the background page should be locked from scrolling to ensure a smooth user experience.
✅ Fixed Overlay Behavior: The navigation component should act as a modal that fully captures user interaction until closed.
✅ Better Usability: Users should be able to interact only with the open navigation component without accidental scrolling.

Screenshots

Screen.Recording.2025-03-10.102726.mp4

Device Information [optional]

- OS:
- Browser:
- version:

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

No

[DhairyaMajmudar]

Thanks for the issue @Yashwanth1906 , while resolving it pls. take care of the following:
In some devices, the secondary navbar doesn't fit to the screen while it's in expanded state. So don't apply scroll lock it the secondary navbar but to background content when secondary navbar is open.