Repository: nodejs/nodejs.dev (ts)

Issue:
Bug: About page sidebar nav
## Description

Right now there are some bugs/incomplete pages that need to be fixed in the about section.

- [ ] Clicking on `About` redirects to the homepage, while it should redirect to `/about`
- [ ] Sidebar nav has a variable width. To reproduce, switch between `Community` and `Project Governance` on https://nodejs.dev/governance.
- [ ] Height of the sidebar is currently limited to viewport height, while it should be equal to the height of the whole page up to the footer
- [ ] Releases page is missing the sidebar (https://nodejs.dev/releases/)
- [x] Security seems to be missing from the navigation (Should be fixed in #1297)
- [x] Working Groups page leads to 404 (Should be fixed in #1345 )

### Steps to reproduce

Go to https://nodejs.dev/about/

Pull request description:
Fix: Sidebar nav bugs
<!--
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

1. Fixed the navigation issue for about tab.
2. Added a fixed with to sidenav keeping the responsiveness in mind.
3. Fixed the height issue for sidenav

To discuss:
The className of ```<main>``` tag was not consistent across different pages of the tab because of which it was causing spacing issues and also when I tried to decrease the width to check for responsiveness of the website the article section was overlapping with the sidenav. To overcome that I gave all the ```<main>``` tags a consistent className of "grid-container", now that issues is fixed. I am attaching images for reference.

Before:
![image](https://user-images.githubusercontent.com/56078934/122529117-bf3c1b00-d03a-11eb-95a5-e35ec3a0e576.png)

After:
![image](https://user-images.githubusercontent.com/56078934/122529056-a9c6f100-d03a-11eb-8304-032a0e349ed2.png)

<!-- Write a brief description of the changes introduced by this PR -->

## Related Issues
Fixes #1446
<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

<!--
  If you want to generate a preview of this PR on our staging server please
  make a comment on the Pull-Request with the text `/preview`
 -->


Patch:
diff --git a/src/components/AboutPageSideNavBar/index.tsx b/src/components/AboutPageSideNavBar/index.tsx
index 5b0686fd..766e3b73 100644
--- a/src/components/AboutPageSideNavBar/index.tsx
+++ b/src/components/AboutPageSideNavBar/index.tsx
@@ -5,7 +5,7 @@ import '../../styles/about.scss';
 
 // eslint-disable-next-line no-shadow
 export enum AboutPageKeys {
-  about = '',
+  about = 'about',
   governance = 'governance',
   community = 'community',
   workingGroups = 'working-groups',
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index f2071cca..cc4d98bd 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -16,7 +16,7 @@ export default function AboutPage({ data }: Page): JSX.Element {
   return (
     <>
       <Layout title={title} description={description} showFooter={false}>
-        <main className="streched-container">
+        <main className="grid-container">
           <AboutPageSideNavBar pageKey={AboutPageKeys.about} />
           <Article
             title={title}
diff --git a/src/pages/governance.tsx b/src/pages/governance.tsx
index eb3a89ab..60c83a21 100644
--- a/src/pages/governance.tsx
+++ b/src/pages/governance.tsx
@@ -17,7 +17,7 @@ export default function GovernancePage({ data }: Page): JSX.Element {
   return (
     <>
       <Layout title={title} description={description} showFooter={false}>
-        <main className="streched-container">
+        <main className="grid-container">
           <AboutPageSideNavBar pageKey={AboutPageKeys.governance} />
           <Article
             title={title}
diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
index d58c5ef0..cbb9564a 100644
--- a/src/pages/privacy.tsx
+++ b/src/pages/privacy.tsx
@@ -17,7 +17,7 @@ export default function PrivacyPage({ data }: Page): JSX.Element {
   return (
     <>
       <Layout title={title} description={description} showFooter={false}>
-        <main className="streched-container">
+        <main className="grid-container">
           <AboutPageSideNavBar pageKey={AboutPageKeys.privacy} />
           <Article
             title={title}
diff --git a/src/pages/releases.tsx b/src/pages/releases.tsx
index 7c57e876..a53491b1 100644
--- a/src/pages/releases.tsx
+++ b/src/pages/releases.tsx
@@ -7,6 +7,9 @@ import Footer from '../components/Footer';
 import '../styles/article-reader.scss';
 import DownloadTable from '../components/DownloadReleases/DownloadTable';
 import { useReleaseData } from '../hooks/useReleaseHistory';
+import AboutPageSideNavBar, {
+  AboutPageKeys,
+} from '../components/AboutPageSideNavBar';
 
 export default function ReleasesPage({ data }: Page): JSX.Element {
   const { title, description } = data.page.frontmatter;
@@ -17,7 +20,8 @@ export default function ReleasesPage({ data }: Page): JSX.Element {
   return (
     <>
       <Layout title={title} description={description} showFooter={false}>
-        <main className="centered-container">
+        <main className="grid-container">
+          <AboutPageSideNavBar pageKey={AboutPageKeys.releases} />
           <Article
             title={title}
             html={html}
diff --git a/src/pages/resources.tsx b/src/pages/resources.tsx
index a413f4e7..2ba87653 100644
--- a/src/pages/resources.tsx
+++ b/src/pages/resources.tsx
@@ -16,7 +16,7 @@ export default function ResourcesPage({ data }: Page): JSX.Element {
   return (
     <>
       <Layout title={title} description={description} showFooter={false}>
-        <main className="streched-container">
+        <main className="grid-container">
           <AboutPageSideNavBar pageKey={AboutPageKeys.resources} />
           <Article
             title={title}
diff --git a/src/pages/security.tsx b/src/pages/security.tsx
index 2031902c..bb4c4c86 100644
--- a/src/pages/security.tsx
+++ b/src/pages/security.tsx
@@ -16,7 +16,7 @@ export default function SecurityPage({ data }: Page): JSX.Element {
   return (
     <>
       <Layout title={title} description={description} showFooter={false}>
-        <main className="streched-container">
+        <main className="grid-container">
           <AboutPageSideNavBar pageKey={AboutPageKeys.security} />
           <Article
             title={title}
diff --git a/src/pages/trademark.tsx b/src/pages/trademark.tsx
index bef4c92f..29885117 100644
--- a/src/pages/trademark.tsx
+++ b/src/pages/trademark.tsx
@@ -17,7 +17,7 @@ export default function TrademarkPage({ data }: Page): JSX.Element {
   return (
     <>
       <Layout title={title} description={description} showFooter={false}>
-        <main className="streched-container">
+        <main className="grid-container">
           <AboutPageSideNavBar pageKey={AboutPageKeys.trademark} />
           <Article
             title={title}
diff --git a/src/pages/working-groups.tsx b/src/pages/working-groups.tsx
index 1fb72b3e..c7776981 100644
--- a/src/pages/working-groups.tsx
+++ b/src/pages/working-groups.tsx
@@ -16,7 +16,7 @@ export default function WorkingGroupsPage({ data }: Page): JSX.Element {
   return (
     <>
       <Layout title={title} description={description} showFooter={false}>
-        <main className="streched-container">
+        <main className="grid-container">
           <AboutPageSideNavBar pageKey={AboutPageKeys.workingGroups} />
           <Article
             title={title}
diff --git a/src/styles/learn.scss b/src/styles/learn.scss
index e7322e2d..e8662b53 100644
--- a/src/styles/learn.scss
+++ b/src/styles/learn.scss
@@ -2,7 +2,6 @@
   /* Needed since overflow: none will disable position: sticky on children */
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   background-color: var(--color-fill-side-nav);
-  height: calc(100vh - var(--nav-height));
   overflow: auto;
   overflow-x: hidden;
   padding: 0 var(--space-20);
@@ -181,7 +180,7 @@
       overflow: visible;
       overflow-y: scroll;
       position: fixed;
-      top: var(--nav-height);
+      top: calc(var(--nav-height) * 2);
     }
 
     > :last-child {


Test patch:
diff --git a/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap b/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
index 86e229e6..53a282c8 100644
--- a/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
+++ b/test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
@@ -16,8 +16,8 @@ exports[`AboutPageSideNavBar renders correctly 1`] = `
     >
       <a
         class="t-body2 side-nav__item-community"
-        href="/"
-        id="link-"
+        href="/about"
+        id="link-about"
       >
         About
       </a>
@@ -98,8 +98,8 @@ exports[`AboutPageSideNavBar should about Releases page exist and contain a href
     >
       <a
         class="t-body2 side-nav__item-community"
-        href="/"
-        id="link-"
+        href="/about"
+        id="link-about"
       >
         About
       </a>
diff --git a/test/pages/__snapshots__/about.test.tsx.snap b/test/pages/__snapshots__/about.test.tsx.snap
index 4821cb8a..281422c5 100644
--- a/test/pages/__snapshots__/about.test.tsx.snap
+++ b/test/pages/__snapshots__/about.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`About page renders correctly 1`] = `
       </div>
     </nav>
     <main
-      class="streched-container"
+      class="grid-container"
     >
       <nav
         class="side-nav-about"
@@ -158,8 +158,8 @@ exports[`About page renders correctly 1`] = `
         >
           <a
             class="t-body2 side-nav__item-community side-nav__item-community--active"
-            href="/"
-            id="link-"
+            href="/about"
+            id="link-about"
           >
             About
           </a>
diff --git a/test/pages/__snapshots__/governance.test.tsx.snap b/test/pages/__snapshots__/governance.test.tsx.snap
index 22e55fd0..6c42db91 100644
--- a/test/pages/__snapshots__/governance.test.tsx.snap
+++ b/test/pages/__snapshots__/governance.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`Governance Page renders correctly 1`] = `
       </div>
     </nav>
     <main
-      class="streched-container"
+      class="grid-container"
     >
       <nav
         class="side-nav-about"
@@ -158,8 +158,8 @@ exports[`Governance Page renders correctly 1`] = `
         >
           <a
             class="t-body2 side-nav__item-community"
-            href="/"
-            id="link-"
+            href="/about"
+            id="link-about"
           >
             About
           </a>
diff --git a/test/pages/__snapshots__/privacy.test.tsx.snap b/test/pages/__snapshots__/privacy.test.tsx.snap
index 0b15ec57..d202b6c7 100644
--- a/test/pages/__snapshots__/privacy.test.tsx.snap
+++ b/test/pages/__snapshots__/privacy.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`Privacy Page renders correctly 1`] = `
       </div>
     </nav>
     <main
-      class="streched-container"
+      class="grid-container"
     >
       <nav
         class="side-nav-about"
@@ -158,8 +158,8 @@ exports[`Privacy Page renders correctly 1`] = `
         >
           <a
             class="t-body2 side-nav__item-community"
-            href="/"
-            id="link-"
+            href="/about"
+            id="link-about"
           >
             About
           </a>
diff --git a/test/pages/__snapshots__/releases.test.tsx.snap b/test/pages/__snapshots__/releases.test.tsx.snap
index f09c3458..22012947 100644
--- a/test/pages/__snapshots__/releases.test.tsx.snap
+++ b/test/pages/__snapshots__/releases.test.tsx.snap
@@ -142,8 +142,85 @@ exports[`Releases page renders correctly 1`] = `
       </div>
     </nav>
     <main
-      class="centered-container"
+      class="grid-container"
     >
+      <nav
+        class="side-nav-about"
+      >
+        <button
+          class="side-nav__open"
+          type="button"
+        >
+          Menu
+        </button>
+        <ul
+          class="community-nav__list"
+        >
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/about"
+            id="link-about"
+          >
+            About
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/governance"
+            id="link-governance"
+          >
+            Project Governance
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/community"
+            id="link-community"
+          >
+            Community
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/working-groups"
+            id="link-working-groups"
+          >
+            Working Groups
+          </a>
+          <a
+            class="t-body2 side-nav__item-community side-nav__item-community--active"
+            href="/releases"
+            id="link-releases"
+          >
+            Releases
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/resources"
+            id="link-resources"
+          >
+            Resources
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/trademark"
+            id="link-trademark"
+          >
+            Trademark Policy
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/privacy"
+            id="link-privacy"
+          >
+            Privacy Policy
+          </a>
+          <a
+            class="t-body2 side-nav__item-community"
+            href="/security"
+            id="link-security"
+          >
+            Security Reporting
+          </a>
+        </ul>
+      </nav>
       <article
         class="article-reader"
       >
diff --git a/test/pages/__snapshots__/resources.test.tsx.snap b/test/pages/__snapshots__/resources.test.tsx.snap
index d522f9a7..dba19fe1 100644
--- a/test/pages/__snapshots__/resources.test.tsx.snap
+++ b/test/pages/__snapshots__/resources.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`About page renders correctly 1`] = `
       </div>
     </nav>
     <main
-      class="streched-container"
+      class="grid-container"
     >
       <nav
         class="side-nav-about"
@@ -158,8 +158,8 @@ exports[`About page renders correctly 1`] = `
         >
           <a
             class="t-body2 side-nav__item-community"
-            href="/"
-            id="link-"
+            href="/about"
+            id="link-about"
           >
             About
           </a>
diff --git a/test/pages/__snapshots__/security.test.tsx.snap b/test/pages/__snapshots__/security.test.tsx.snap
index cae0c044..9d35ea32 100644
--- a/test/pages/__snapshots__/security.test.tsx.snap
+++ b/test/pages/__snapshots__/security.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`Security page renders correctly 1`] = `
       </div>
     </nav>
     <main
-      class="streched-container"
+      class="grid-container"
     >
       <nav
         class="side-nav-about"
@@ -158,8 +158,8 @@ exports[`Security page renders correctly 1`] = `
         >
           <a
             class="t-body2 side-nav__item-community"
-            href="/"
-            id="link-"
+            href="/about"
+            id="link-about"
           >
             About
           </a>
diff --git a/test/pages/__snapshots__/trademark.test.tsx.snap b/test/pages/__snapshots__/trademark.test.tsx.snap
index 6509a202..f231282a 100644
--- a/test/pages/__snapshots__/trademark.test.tsx.snap
+++ b/test/pages/__snapshots__/trademark.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`Trademark page renders correctly 1`] = `
       </div>
     </nav>
     <main
-      class="streched-container"
+      class="grid-container"
     >
       <nav
         class="side-nav-about"
@@ -158,8 +158,8 @@ exports[`Trademark page renders correctly 1`] = `
         >
           <a
             class="t-body2 side-nav__item-community"
-            href="/"
-            id="link-"
+            href="/about"
+            id="link-about"
           >
             About
           </a>
diff --git a/test/pages/__snapshots__/working-groups.test.tsx.snap b/test/pages/__snapshots__/working-groups.test.tsx.snap
index c0f9cf82..2d8ce60d 100644
--- a/test/pages/__snapshots__/working-groups.test.tsx.snap
+++ b/test/pages/__snapshots__/working-groups.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`Working Groups page renders correctly 1`] = `
       </div>
     </nav>
     <main
-      class="streched-container"
+      class="grid-container"
     >
       <nav
         class="side-nav-about"
@@ -158,8 +158,8 @@ exports[`Working Groups page renders correctly 1`] = `
         >
           <a
             class="t-body2 side-nav__item-community"
-            href="/"
-            id="link-"
+            href="/about"
+            id="link-about"
           >
             About
           </a>