Repository: nodejs/nodejs.dev (ts)

Issue:
Cannot scroll on the "About" pages sidebar
### URL:

https://nodejs.dev/en/about/

### Browser Name:

Safari

### Browser Version:

12

### Operating System:

iOS 16

### How to reproduce the issue:

1. Open the "About page" on a mobile-sized screen
2. Open the "Side navigation" bar by using the "Hamburger" button
3. You'll see you cannot scroll the navigation.

It is expected to be able to scroll, as it works on the `/learn` and `/api` pages.

Pull request:
Cannot scroll on the "About" pages sidebar

<!--
Please read the [Code of Conduct](https://github.com/nodejs/nodejs.dev/blob/main/CODE_OF_CONDUCT.md) and the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) before opening a pull request.
-->

## Description

Clicking the hamburger button on the side nav bar set a `overflow: hidden` style on `body`. This did not appear to be the case for the nav bar on the api page, so I tried removing the `useEffect` call that sets this style and it seems to allow you to scroll to the bottom of the nav now.

I also noticed that it is not possible to scroll down to the footer on mobile on the api page. Not sure if that is a separate issue.

<!-- Write a brief description of the changes introduced by this PR -->

## Related Issues

Fixes #2865

<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

### Check List

<!--
ATTENTION
Please follow this check list to ensure that you've followed all items before opening this PR
-->

- [x] I have read the [Contributing Guidelines](https://github.com/nodejs/nodejs.dev/blob/main/CONTRIBUTING.md) and made commit messages that follow the guideline.
- [x] I have run `npm run lint:js -- --fix` and/or `npm run lint:md -- --fix` for my JavaScript and/or Markdown changes.
  - This is important as most of the cases your code changes might not be correctly linted
- [x] I have run `npm run test` to check if all tests are passing, and/or `npm run test -- -u` to update snapshots if I created and/or updated React Components.
- [x] I have checked that the build works locally and that `npm run build` work fine.
- [x] I've covered new added functionality with unit tests if necessary.


Patch:
diff --git a/src/components/SideNavBar/index.tsx b/src/components/SideNavBar/index.tsx
index 3eb6189b..ccd8ebaa 100644
--- a/src/components/SideNavBar/index.tsx
+++ b/src/components/SideNavBar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo, useEffect } from 'react';
+import React, { useRef, useState, useMemo } from 'react';
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import { FormattedMessage, useIntl } from 'react-intl';
 import GroupsIcon from '@mui/icons-material/Groups';
@@ -92,12 +92,6 @@ const sideNavBarItems: SideNavBarItem[] = [
   },
 ];
 
-// eslint-disable-next-line no-shadow
-export enum OverflowTypes {
-  unset = 'unset',
-  hidden = 'hidden',
-}
-
 interface NavBarProps {
   pageKey?: string;
   items?: SideNavBarItem[];
@@ -112,14 +106,6 @@ const SideNavBar = ({ pageKey, items = sideNavBarItems }: NavBarProps) => {
     [styles.sideNavFixed]: navOpen,
   });
 
-  useEffect(() => {
-    if (typeof document === 'object' && document.body) {
-      document.body.style.overflow = navOpen
-        ? OverflowTypes.hidden
-        : OverflowTypes.unset;
-    }
-  }, [navOpen]);
-
   const navElement = useRef<HTMLElement | null>(null);
 
   const renderTitle = ({ title, slug, icon: Icon }: SideNavBarItem) => {


Test patch:
diff --git a/src/components/SideNavBar/__tests__/index.test.tsx b/src/components/SideNavBar/__tests__/index.test.tsx
index 6c1acfac..b13dc869 100644
--- a/src/components/SideNavBar/__tests__/index.test.tsx
+++ b/src/components/SideNavBar/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import SideNavBar, { SideNavBarKeys, OverflowTypes } from '..';
+import SideNavBar, { SideNavBarKeys } from '..';
 import { SideNavBarItem } from '../../../types';
 
 describe('SideNavBar', () => {
@@ -122,28 +122,6 @@ describe('SideNavBar', () => {
     expect(activeLinks && activeLinks.length).toBe(1);
   });
 
-  it('should set the body overflow hidden on menu click', async () => {
-    render(<SideNavBar pageKey={SideNavBarKeys.releases} />);
-    const downloadItem: Element = screen.getAllByRole('button')[0] as Element;
-    expect(document.body.style.overflow).toBe(OverflowTypes.unset);
-    await userEvent.click(downloadItem);
-    expect(document.body.style.overflow).toBe(OverflowTypes.hidden);
-  });
-
-  it('should set the body overflow hidden/unset on toggling', async () => {
-    render(<SideNavBar pageKey={SideNavBarKeys.releases} />);
-    const downloadItem: Element = screen.getAllByRole('button')[0] as Element;
-    expect(document.body.style.overflow).toBe(OverflowTypes.unset);
-    await userEvent.click(downloadItem);
-    expect(document.body.style.overflow).toBe(OverflowTypes.hidden);
-    await userEvent.click(downloadItem);
-    expect(document.body.style.overflow).toBe(OverflowTypes.unset);
-    await userEvent.click(downloadItem);
-    expect(document.body.style.overflow).toBe(OverflowTypes.hidden);
-    await userEvent.click(downloadItem);
-    expect(document.body.style.overflow).toBe(OverflowTypes.unset);
-  });
-
   it('should contain a href to https link', () => {
     const title = 'title';
     const slug = 'https://test.domain';