Repository: nodejs/nodejs.dev (ts)

Issue:
bug: opening navigation menu scrolls whole page
## Description

When opening the navigation menu on mobile screens on `/learn` pages, the whole page gets scrolled due to animation, instead of just the navigation part.

### Steps to reproduce

Go to https://nodejs.dev/learn/where-does-npm-install-the-packages and then open and close the navigation menu,

### Expected result

Upon closing the navigation menu, you should be able to continue from where you left for navigation.

### Actual result

The whole page scrolls to the end.

### Environment

- OS Version: Android 11
- Browser Version: Chrome 90


Pull request:
Fix: Navigation Scrolling Issue in phones
<!--
Please read the [Code of Conduct](https://github.com/nodejs/nodejs.dev/blob/master/CODE_OF_CONDUCT.md) and the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/master/CONTRIBUTING.md) before opening a pull request.
-->

## Description

Previously, the whole window was scrolling for navigation animation in mobile phones. This PR makes only the navigation element scrollable.

## Related Issues

Fixes #1295 


Patch:
diff --git a/src/containers/Navigation/index.tsx b/src/containers/Navigation/index.tsx
index 1f8f6a29..9335c523 100644
--- a/src/containers/Navigation/index.tsx
+++ b/src/containers/Navigation/index.tsx
@@ -40,9 +40,19 @@ const Navigation = ({
           nav
         );
         // If it's mobile screen and nav is not open, do nothing
-        if (isMobileScreen() && !isOpen) return;
+        if (isMobileScreen() && !isOpen) {
+          (document.querySelector(':root') as HTMLElement).style.overflowY =
+            'initial';
+          (document.querySelector('.nav') as HTMLElement).style.position =
+            'sticky';
+          return;
+        }
         // If it's mobile screen, directly scroll to current element when nav opens
         if (isMobileScreen()) {
+          (document.querySelector(':root') as HTMLElement).style.overflowY =
+            'hidden';
+          (document.querySelector('.nav') as HTMLElement).style.position =
+            'fixed';
           scrollTo(newScrollPos, scrollWindow, scrollTime);
         } else if (!previousSlug) {
           // If there's no previous slug, directly scroll to the current link
diff --git a/src/styles/learn.scss b/src/styles/learn.scss
index 95ba87d6..e7322e2d 100644
--- a/src/styles/learn.scss
+++ b/src/styles/learn.scss
@@ -154,7 +154,7 @@
 }
 
 .side-nav.side-nav--open .side-nav__open {
-  top: calc(var(--nav-height) + 1.8rem);
+  top: 1.8rem;
   margin-bottom: -35px;
   margin-top: 16px;
   color: transparent;
@@ -176,18 +176,12 @@
     overflow: hidden;
     max-width: unset;
 
-    &::before {
-      width: 110%;
-    }
-
     &.side-nav--open {
-      max-height: 100%;
+      max-height: calc(100vh - var(--nav-height));
       overflow: visible;
-      position: static;
-
-      + .article-reader {
-        display: none;
-      }
+      overflow-y: scroll;
+      position: fixed;
+      top: var(--nav-height);
     }
 
     > :last-child {
@@ -195,9 +189,14 @@
     }
 
     &::before {
-      height: 92px;
+      height: 60px;
       margin-bottom: -92px;
       top: var(--nav-height);
+      width: 110%;
+      content: '';
+      z-index: 100;
+      position: fixed;
+      background-color: var(--color-fill-side-nav);
     }
   }
 
@@ -209,6 +208,7 @@
     top: 24px;
     height: 0;
     overflow: hidden;
+
     .side-nav--open & {
       overflow: visible;
       height: auto;
diff --git a/src/util/scrollTo.tsx b/src/util/scrollTo.tsx
index ca880986..3b4e0da6 100644
--- a/src/util/scrollTo.tsx
+++ b/src/util/scrollTo.tsx
@@ -56,14 +56,12 @@ export const calcNavScrollParams = (
 ): ScrollParams => {
   const navRect = navElement.getBoundingClientRect();
   let newScrollPos: number;
-  let scrollWindow: HTMLElement | null;
+  const scrollWindow = navElement;
   if (isMobileScreen()) {
     // phone
-    scrollWindow = null;
     newScrollPos = linkHeight - window.screen.height / 2;
   } else {
     // tablet
-    scrollWindow = navElement;
     newScrollPos =
       linkHeight -
       navRect.top -


Test patch:
diff --git a/test/util/scrollTo.test.ts b/test/util/scrollTo.test.ts
index 3e8e8c8c..a662528c 100644
--- a/test/util/scrollTo.test.ts
+++ b/test/util/scrollTo.test.ts
@@ -6,6 +6,6 @@ describe('Tests for calcNavScrollParams', () => {
   it('scrollWindow is set null for mobile devices', () => {
     window.innerWidth = 720;
     const { scrollWindow } = calcNavScrollParams(height, mockHTMLElement);
-    expect(scrollWindow).toBeNull();
+    expect(scrollWindow).toBeValid();
   });
 });