Repository: nodejs/nodejs.dev
Pull request #2654 (2022-08-18 19:30:29)

introduce several fixes within the nodejs.dev (styles, links, caching, functionality)
<!--
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.
-->

### 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.

## Description

This PR updates several styles to match the Figmas, and fixes several design and functionality related bugs.

- Fix the height and styling of the primary and secondary Navigation
- Made the Learn menu to look like the Figmas
- Made the Footer look like in the Figmas
- Fixed Footer and Navigation styles on Mobile
- Fixed Paddings of several components according to Figmas
- Simplified logic for scrolling on Learn
- Added feature for toggling menu sections from Learn
- Fixed Download page designs on mobile and Desktop
- Fixed scrollbars for light/dark theme
- Removed hacky window reliant `previousSlug` and `scrollTo` utility
- Created more Learn categories (Temporary ones, that can be tidied afterwards)
- Fix the height of the main navigation bar being too big
- Fixes the Search Input links being broken
- Fixes some Learn pages being broken due to `createMarkdownPages` relativePath utility using `endsWith` instead of `includes`
- Adds preaching configuration for the pages
- Introduced Side Navigation for Blogs
- Redesigned Blog Page and Category Page
- Fixed the Homepage Node Demo colours
- Conditional Service Worker based on if it is not a Staging Page

## Screenshots

![image](https://user-images.githubusercontent.com/12037269/185478721-e1d3699f-9aef-4e91-98d3-29717b0b5e82.png)

![image](https://user-images.githubusercontent.com/12037269/185593801-6beca8a3-8238-4097-8e70-4e362bf0198e.png)

## Related Issues

Closes https://github.com/nodejs/nodejs.dev/issues/854
Relates to https://github.com/nodejs/nodejs.dev/issues/950
Closes https://github.com/nodejs/nodejs.dev/issues/2661

github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2654/
github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2654/
codecov-commenter: # [Codecov](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) Report
> Merging [#2654](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) (ef2e0f6) into [main](https://codecov.io/gh/nodejs/nodejs.dev/commit/bf234b713f34b1f43c4da3c012bfacb35621e775?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) (bf234b7) will **increase** coverage by `2.81%`.
> The diff coverage is `95.23%`.

```diff
@@            Coverage Diff             @@
##             main    #2654      +/-   ##
==========================================
+ Coverage   83.46%   86.28%   +2.81%     
==========================================
  Files         103      102       -1     
  Lines        1113     1057      -56     
  Branches      310      291      -19     
==========================================
- Hits          929      912      -17     
+ Misses        178      139      -39     
  Partials        6        6              
```


| [Impacted Files](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | Coverage Δ | |
|---|---|---|
| [src/components/SearchBar/SearchInput.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvU2VhcmNoQmFyL1NlYXJjaElucHV0LnRzeA==) | `57.14% <ø> (ø)` | |
| [util-node/createMarkdownPages.js](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-dXRpbC1ub2RlL2NyZWF0ZU1hcmtkb3duUGFnZXMuanM=) | `3.12% <0.00%> (ø)` | |
| [src/components/Article/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvQXJ0aWNsZS9pbmRleC50c3g=) | `92.10% <100.00%> (ø)` | |
| [src/components/Header/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvSGVhZGVyL2luZGV4LnRzeA==) | `95.65% <100.00%> (+0.65%)` | :arrow_up: |
| [src/components/NavigationSection/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbXBvbmVudHMvTmF2aWdhdGlvblNlY3Rpb24vaW5kZXgudHN4) | `100.00% <100.00%> (ø)` | |
| [src/containers/Navigation/index.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL2NvbnRhaW5lcnMvTmF2aWdhdGlvbi9pbmRleC50c3g=) | `90.00% <100.00%> (+21.81%)` | :arrow_up: |
| [src/templates/learn.tsx](https://codecov.io/gh/nodejs/nodejs.dev/pull/2654/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-c3JjL3RlbXBsYXRlcy9sZWFybi50c3g=) | `100.00% <100.00%> (+33.33%)` | :arrow_up: |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None)

github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2654/
github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2654/
ovflowd: @benhalverson could I get a review here? This PR also fixes the failure on your PR (https://github.com/nodejs/nodejs.dev/pull/2650)
ovflowd: @nodejs/nodejs-dev could I pretty please get a review here?
github-actions[bot]: Please find a preview at: https://staging.nodejs.dev/2654/
benhalverson: I like it. My only ask is you bring back the github icon in the top right corner with the link going back directly to this github repo. The one at the bottom goes to nodejs/node 

ovflowd: > I like it. My only ask is you bring back the github icon in the top right corner with the link going back directly to this github repo.

Gotcha, I removed it because the Figmas don't have it, and Material Icons also don't have any GitHub Icon, and I thought that (maybe it makes sense) to just use Material Icons.

I would actually (honestly) expect for Node.js the GitHub link to go to either nodejs/node or just the nodejs org. WDYT?
benhalverson: The design was never set in stone so we don't have to make it exactly like the figma. I thought the same when I first joined. 👍🏻 
I think the top right should go here nodejs/nodejs.dev and the bottom right can goto nodejs/node. 

If I wanted to contribute to this site and it sent me to the nodejs.org repo I'd be confused about why the code and what I'm looking at don't match.

ovflowd: > If I wanted to contribute to this site and it sent me to the nodejs.org repo I'd be confused about why the code and what I'm looking at don't match.

The thing is that the nodejs website should be about node.js, no? Any of the actual document (docs, learn) pages have the "edit this page in github" whose would redirect you there.

> The design was never set in stone so we don't have to make it exactly like the figma. 

True thing.

Well, I'm okay with reading the GitHub icon, but that one was low-res. Gonna grab one from [here](https://github.com/logos)

Patch:
diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index ddfaef6e..9e356660 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -3,19 +3,7 @@ import ReactIntlProvider from './src/containers/ReactIntl';
 import { defaultLanguage, defaultMessages } from './util-node/locales';
 import type { WrapPageElementBrowser } from './src/types';
 
-declare global {
-  interface Window {
-    locations: string[];
-    previousPath: string;
-  }
-}
-
-export const onRouteUpdate = () => {
-  window.locations = window.locations || [document.referrer];
-  window.locations.push(window.location.href);
-  window.previousPath = window.locations[window.locations.length - 1];
-};
-
+// eslint-disable-next-line import/prefer-default-export
 export const wrapPageElement: WrapPageElementBrowser = ({ element, props }) => {
   const { locale = defaultLanguage, intlMessages = defaultMessages } =
     props.pageContext;
diff --git a/gatsby-config.js b/gatsby-config.js
index 73c38483..aa17d6c6 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -3,7 +3,7 @@ require('dotenv').config();
 const config = require('./src/config.json');
 const { localesAsString, defaultLanguage } = require('./util-node/locales');
 
-module.exports = {
+const gatsbyConfig = {
   pathPrefix: process.env.PATH_PREFIX,
   siteMetadata: {
     title: config.title,
@@ -169,13 +169,29 @@ module.exports = {
     },
     'gatsby-plugin-sitemap',
     'gatsby-plugin-meta-redirect',
-    {
-      // This is a temporary solution until (https://github.com/gatsbyjs/gatsby/pull/31542) gets merged
-      // So we are able to use the official service worker again. This service worker supports latest Workbox
-      resolve: 'gatsby-plugin-offline-next',
-      options: {
-        globPatterns: ['**/icon-path*'],
-      },
-    },
   ],
 };
+
+// Note.: This implementation doesn't work with pathPrefixes (eg.: our staging pages)
+// Which means, that the staging pages will not benefit from a SW
+// It also makes sense to not use SW on Staging Pages as we want to keep testing them from time-to-time
+// This will still work when building & serving gatsby locally
+if (!gatsbyConfig.pathPrefix) {
+  gatsbyConfig.plugins.push({
+    // This is a temporary solution until (https://github.com/gatsbyjs/gatsby/pull/31542) gets merged
+    // So we are able to use the official service worker again. This service worker supports latest Workbox
+    resolve: 'gatsby-plugin-offline-next',
+    options: {
+      precachePages: [
+        '/',
+        '/*/learn/*',
+        '/*/about/*',
+        '/*/download/*',
+        '/*/blog/*',
+      ],
+      globPatterns: ['**/icon-path*'],
+    },
+  });
+}
+
+module.exports = gatsbyConfig;
diff --git a/src/components/Article/index.tsx b/src/components/Article/index.tsx
index 9862baf8..f0980c52 100644
--- a/src/components/Article/index.tsx
+++ b/src/components/Article/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { throttle } from 'throttle-debounce';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { MDXProvider } from '@mdx-js/react';
@@ -43,15 +43,13 @@ const Article = ({
   date,
   children,
 }: Props): JSX.Element => {
-  const element = React.useRef<HTMLDivElement>(null);
+  const element = useRef<HTMLDivElement>(null);
 
-  React.useEffect((): (() => void) => {
+  useEffect((): (() => void) => {
     const currentElementRef = element;
 
     if (window.history.state && window.history.state.articleScrollTo) {
-      window.scrollTo({
-        top: window.history.state.articleScrollTo,
-      });
+      window.scrollTo({ top: window.history.state.articleScrollTo });
     }
 
     const handleObserverThrottled = throttle(
diff --git a/src/components/BlogCard/BlogCard.scss b/src/components/BlogCard/BlogCard.scss
index 7de4304c..59d0fe53 100644
--- a/src/components/BlogCard/BlogCard.scss
+++ b/src/components/BlogCard/BlogCard.scss
@@ -1,7 +1,7 @@
 .blog-card {
   display: flex;
   flex-direction: column;
-  padding: 40px 30px;
+  padding: 40px 30px 40px 0;
 
   .title {
     background-color: var(--color-blog-card-background);
diff --git a/src/components/DownloadAdditional/DownloadAdditional.scss b/src/components/DownloadAdditional/DownloadAdditional.scss
index 7f24c56d..fa24677c 100644
--- a/src/components/DownloadAdditional/DownloadAdditional.scss
+++ b/src/components/DownloadAdditional/DownloadAdditional.scss
@@ -6,6 +6,7 @@ $downloadable-item-height: 40px;
   width: 100%;
 
   &__header {
+    align-items: center;
     display: flex;
     justify-content: space-between;
 
@@ -15,8 +16,7 @@ $downloadable-item-height: 40px;
   }
 
   &__title {
-    font-size: var(--font-size-display5);
-    line-height: var(--line-height-display4);
+    margin: 0;
   }
 
   &__body {
diff --git a/src/components/DownloadReleases/DownloadReleases.scss b/src/components/DownloadReleases/DownloadReleases.scss
index d7609d34..3d2a0165 100644
--- a/src/components/DownloadReleases/DownloadReleases.scss
+++ b/src/components/DownloadReleases/DownloadReleases.scss
@@ -8,9 +8,3 @@
   line-height: var(--line-height-display4);
   margin: 126px 0 50px;
 }
-
-.lts__text {
-  font-size: var(--font-size-display5);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-body1);
-}
diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
index 34079f71..eac518e3 100644
--- a/src/components/Footer/footer.scss
+++ b/src/components/Footer/footer.scss
@@ -1,7 +1,7 @@
 .footer {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-between;
   margin: 0;
   margin-top: auto;
 
@@ -60,7 +60,7 @@
       > li:first-of-type {
         border-right: none;
         margin-right: 0;
-        padding-right: 0;
+        padding: 6px 0;
       }
     }
 
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index b5c960e3..8172c6e6 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -44,10 +44,9 @@ const Footer = (): JSX.Element => {
           </Link>
         </li>
         <li>
-          {/* @TODO: Once our Blog components are completely read, move this link to our Blog page */}
-          <a className="footer__link" href="https://nodejs.org/en/blog/">
+          <Link className="footer__link" to="/blog">
             Blog
-          </a>
+          </Link>
         </li>
       </ul>
       <ul className="footer__right">
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 347b9e70..43e38931 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,8 +1,9 @@
 import { LocalizedLink as Link } from 'gatsby-theme-i18n';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useTheme } from '@skagami/gatsby-plugin-dark-mode';
 import { ReactComponent as LogoLight } from '../../images/logos/nodejs-logo-light-mode.svg';
 import { ReactComponent as LogoDark } from '../../images/logos/nodejs-logo-dark-mode.svg';
+import { ReactComponent as GitHubLogo } from '../../images/logos/github-logo.svg';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { useLocaleAsDropdown } from '../../hooks/useLocaleAsDropdown';
 import { useAutoClosableDropdown } from '../../hooks/useAutoClosableDropdown';
@@ -25,6 +26,13 @@ const Header = (): JSX.Element => {
 
   const [theme, toggleTheme] = useTheme();
 
+  useEffect(() => {
+    // This is responsible for setting the color-scheme of the scroll-bars
+    if (typeof document === 'object' && document.documentElement) {
+      document.documentElement.style['color-scheme'] = theme;
+    }
+  }, [theme]);
+
   const handleThemeOnClick = (isKeyPress = false): void => {
     if (isKeyPress) {
       return;
@@ -128,6 +136,20 @@ const Header = (): JSX.Element => {
                 {renderDropdown}
               </li>
             )}
+
+            <li className="nav__tabs">
+              <a
+                target="_blank"
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+              >
+                <span className="sr-only">GitHub</span>
+                <GitHubLogo
+                  fill="var(--color-text-accent)"
+                  style={{ padding: '1rem', width: '2rem', height: '2rem' }}
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
diff --git a/src/components/InstallTabs/InstallTabs.scss b/src/components/InstallTabs/InstallTabs.scss
index eaea73d4..b8721174 100644
--- a/src/components/InstallTabs/InstallTabs.scss
+++ b/src/components/InstallTabs/InstallTabs.scss
@@ -24,7 +24,7 @@
       width: 100%;
 
       &--selected {
-        background: var(--black9);
+        background: var(--black10);
         border-radius: 5px 5px 0 0;
         color: #fff;
       }
@@ -36,7 +36,7 @@
         outline: none;
 
         &:after {
-          background: var(--black9);
+          background: var(--black10);
           bottom: -5px;
           content: '';
           height: 5px;
diff --git a/src/components/Layout/article.tsx b/src/components/Layout/article.tsx
index 621f286c..d2ffcfab 100644
--- a/src/components/Layout/article.tsx
+++ b/src/components/Layout/article.tsx
@@ -32,7 +32,9 @@ const ArticleLayout = ({
   return (
     <Layout title={title} description={description}>
       <main className="grid-container">
-        {sidenavKey && <SideNavBar pageKey={sidenavKey} />}
+        {sidenavKey && (
+          <SideNavBar pageKey={sidenavKey} title="Community Pages" />
+        )}
         <Article
           title={title}
           body={body}
diff --git a/src/components/NavigationSection/index.tsx b/src/components/NavigationSection/index.tsx
index fc93bd38..f321d7de 100644
--- a/src/components/NavigationSection/index.tsx
+++ b/src/components/NavigationSection/index.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
 import { NavigationSectionItem } from '../../types';
 import NavigationItem from '../NavigationItem';
 
@@ -18,26 +19,44 @@ const NavigationSection = ({
   onItemClick,
   readSections,
 }: Props): JSX.Element => {
+  const isActive = (item: NavigationSectionItem) => item.slug === currentSlug;
+  const [isOpen, setIsOpen] = useState(!!section.find(isActive));
+  const isMobile = useMediaQuery('(max-width: 870px)');
+  const toggle = (): void => setIsOpen(!isOpen);
+
   return (
     <ul className="side-nav__list">
-      <h2 className="t-body2 side-nav__title">
-        <i className="material-icons">offline_bolt</i>
+      <div
+        className="t-body2 side-nav__item side-nav__item--title"
+        onClick={toggle}
+        onKeyDown={toggle}
+        tabIndex={0}
+        role="menuitem"
+      >
         {title}
-      </h2>
-      {section.map((item: NavigationSectionItem): JSX.Element => {
-        const isRead: boolean = readSections.has(item.slug);
+        {!isMobile && (
+          <i className="material-icons">
+            {isOpen ? 'arrow_drop_down' : 'arrow_drop_up'}
+          </i>
+        )}
+      </div>
+      <div style={{ display: isOpen || isMobile ? 'block' : 'none' }}>
+        {section.map((item: NavigationSectionItem): JSX.Element => {
+          const isRead: boolean = readSections.has(item.slug);
 
-        return (
-          <NavigationItem
-            key={item.slug}
-            title={item.title}
-            slug={item.slug}
-            isRead={isRead}
-            isActive={item.slug === currentSlug}
-            onClick={onItemClick}
-          />
-        );
-      })}
+          return (
+            <NavigationItem
+              key={item.slug}
+              title={item.title}
+              slug={item.slug}
+              baseUrl={item.baseUrl}
+              isRead={isRead}
+              isActive={isActive(item)}
+              onClick={onItemClick}
+            />
+          );
+        })}
+      </div>
     </ul>
   );
 };
diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss
index ed9dde94..71438b3d 100644
--- a/src/components/Pagination/Pagination.scss
+++ b/src/components/Pagination/Pagination.scss
@@ -3,7 +3,7 @@
   flex-wrap: wrap;
   justify-content: space-between;
   list-style: none;
-  padding: 5rem 0;
+  padding: 5rem 0 0 0;
 
   .link {
     color: var(--black7) !important;
diff --git a/src/components/SearchBar/SearchBar.scss b/src/components/SearchBar/SearchBar.scss
index 98312926..498dace3 100644
--- a/src/components/SearchBar/SearchBar.scss
+++ b/src/components/SearchBar/SearchBar.scss
@@ -6,17 +6,20 @@
   height: fit-content;
   max-height: 90vh;
   overflow-y: auto;
-  padding-bottom: 10px;
+
+  &.expanded {
+    padding-bottom: 10px;
+  }
 }
 
 .searchInputContainer {
   align-items: center;
   display: flex;
-  height: 3em;
   position: relative;
   width: 100%;
 
   label {
+    align-items: center;
     color: var(--color-text-accent);
     cursor: pointer;
     display: flex;
diff --git a/src/components/SearchBar/SearchInput.tsx b/src/components/SearchBar/SearchInput.tsx
index 058fd470..b547e606 100644
--- a/src/components/SearchBar/SearchInput.tsx
+++ b/src/components/SearchBar/SearchInput.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo, useEffect, useState, createRef } from 'react';
+import { LocalizedLink as Link } from 'gatsby-theme-i18n';
 import classNames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useClickOutside } from 'react-click-outside-hook';
 import { Index } from 'elasticlunr';
-import { Link } from 'gatsby';
 import { SearchResult } from '../../types';
 import { SearchProps } from './types';
 
@@ -16,7 +16,7 @@ const containerVariants = {
     boxShadow: '0px 2px 12px 3px rgba(153, 204, 125, 0.14)',
   },
   collapsed: {
-    minHeight: '3em',
+    minHeight: '0em',
     width: '100%',
     maxWidth: '7em',
     boxShadow: 'none',
@@ -98,8 +98,7 @@ const SearchInput = ({ localSearchLearnPages }: SearchProps): JSX.Element => {
       <div
         className="searchInputContainer"
         onKeyPress={onKeyPressHandler}
-        role="button"
-        tabIndex={0}
+        role="presentation"
       >
         <i className="material-icons searchIcon">travel_explore</i>
         <label htmlFor="searchInput">
diff --git a/src/components/SideNavBar/index.tsx b/src/components/SideNavBar/index.tsx
index e4820550..f0d159fc 100644
--- a/src/components/SideNavBar/index.tsx
+++ b/src/components/SideNavBar/index.tsx
@@ -75,6 +75,7 @@ interface NavBarProps {
 const SideNavBar = ({
   pageKey,
   items = sideNavBarItems,
+  title,
 }: NavBarProps): JSX.Element => {
   const [navOpen, setNavOpen] = useState<boolean>(false);
   const toggle = (): void => setNavOpen(!navOpen);
@@ -91,12 +92,26 @@ const SideNavBar = ({
 
   const navElement = useRef<HTMLElement | null>(null);
 
+  const renderNavTitle = () => {
+    if (title) {
+      return (
+        <li className="t-body2 side-nav__item--title">
+          <b>{title}</b>
+          <i className="material-icons">arrow_drop_down</i>
+        </li>
+      );
+    }
+
+    return null;
+  };
+
   return (
     <nav className={className} ref={navElement}>
       <button type="button" className="side-nav__open" onClick={toggle}>
         Menu
       </button>
       <ul className="community-nav__list">
+        {renderNavTitle()}
         {items
           .sort((a, b) => a.title.localeCompare(b.title))
           .map(({ title: commTitle, slug }) => {
diff --git a/src/components/Toc/index.tsx b/src/components/Toc/index.tsx
index 56f5d17f..028e569b 100644
--- a/src/components/Toc/index.tsx
+++ b/src/components/Toc/index.tsx
@@ -1,5 +1,5 @@
-import { Link } from 'gatsby';
 import React from 'react';
+import { Link } from 'gatsby';
 import { TableOfContents } from '../../types';
 
 interface Props {
@@ -8,16 +8,11 @@ interface Props {
 }
 
 const TOC = ({ heading, tableOfContents }: Props): null | JSX.Element => {
-  if (!tableOfContents?.items) {
-    return null;
-  }
-
-  return (
+  if (tableOfContents?.items) {
     <details className="toc">
       <summary>
         <h6>{heading}</h6>
       </summary>
-      {/* eslint-disable react/no-danger */}
       <ul className="tableOfContents">
         {tableOfContents.items.map(i => (
           <li key={i.url}>
@@ -25,8 +20,10 @@ const TOC = ({ heading, tableOfContents }: Props): null | JSX.Element => {
           </li>
         ))}
       </ul>
-    </details>
-  );
+    </details>;
+  }
+
+  return null;
 };
 
 export default TOC;
diff --git a/src/containers/Navigation/index.tsx b/src/containers/Navigation/index.tsx
index 9335c523..6284137d 100644
--- a/src/containers/Navigation/index.tsx
+++ b/src/containers/Navigation/index.tsx
@@ -1,13 +1,11 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import NavigationSection from '../../components/NavigationSection';
 import { NavigationSectionData, NavigationSectionItem } from '../../types';
 import { isMobileScreen } from '../../util/isScreenWithinWidth';
-import { scrollTo, calcNavScrollParams } from '../../util/scrollTo';
 
 interface Props {
   sections: NavigationSectionData;
   currentSlug: string;
-  previousSlug: string;
   label: string;
   category: string;
 }
@@ -15,74 +13,29 @@ interface Props {
 const Navigation = ({
   sections,
   currentSlug,
-  previousSlug,
   label,
   category,
 }: Props): JSX.Element => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const navElement = useRef<HTMLElement | null>(null);
   const toggle = (): void => setIsOpen(!isOpen);
-  const onItemClick = (): void => {
+
+  const onItemClick = () => {
     if (isMobileScreen()) {
       toggle();
     }
   };
 
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const nav = navElement.current;
-      if (nav) {
-        //  Get current link element
-        const currentLinkElem = document.getElementById(`link-${currentSlug}`);
-        // Get scroll position for current link
-        const { newScrollPos, scrollWindow, scrollTime } = calcNavScrollParams(
-          currentLinkElem?.getBoundingClientRect().top || 0,
-          nav
-        );
-        // If it's mobile screen and nav is not open, do nothing
-        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
-          nav.scrollTop = newScrollPos;
-        } else {
-          // Get previous link element
-          const prevLinkElem = document.getElementById(`link-${previousSlug}`);
-          // Get previous element's position
-          const prevElemScroll = calcNavScrollParams(
-            prevLinkElem?.getBoundingClientRect().top || 0,
-            nav
-          );
-          // First scroll directly to previous element
-          nav.scrollTop = prevElemScroll.newScrollPos;
-          // Now scroll to current element with animation
-          scrollTo(newScrollPos, scrollWindow, scrollTime);
-        }
-      }
-    }
-  }, [currentSlug, previousSlug, isOpen]);
-
   const className = isOpen ? 'side-nav side-nav--open' : 'side-nav';
 
   const readSections: Set<NavigationSectionItem['slug']> = new Set();
+
   // Assume section items up to the one currently open have been read. Track
   // their unique slugs in `readSections` set.
-  Object.keys(sections).some((sectionKey): boolean => {
+  Object.keys(sections).some(sectionKey => {
     let isCurrentSlug = false;
     sections[sectionKey].data.some((sectionItem): boolean => {
       isCurrentSlug = sectionItem.slug === currentSlug;
+
       if (!isCurrentSlug) {
         readSections.add(sectionItem.slug);
       }
@@ -94,7 +47,7 @@ const Navigation = ({
   });
 
   return (
-    <nav aria-label={label} className={className} ref={navElement}>
+    <nav aria-label={label} className={className}>
       <button type="button" className="side-nav__open" onClick={toggle}>
         Menu
       </button>
diff --git a/src/data/blog/categories.yaml b/src/data/blog/categories.yaml
index f43e9972..5301266a 100644
--- a/src/data/blog/categories.yaml
+++ b/src/data/blog/categories.yaml
@@ -1,6 +1,6 @@
 - name: announcements
   slug: Announcements
+  description: 'Blog category for Node.js announcements'
 - name: vulnerabilities
   slug: Vulnerabilities
-- name: releases
-  slug: Releases & Updates
+  description: 'Blog category regarding Security Vulnerabilities'
diff --git a/src/data/learn.yaml b/src/data/learn.yaml
index 53ebe487..84d5d0d3 100644
--- a/src/data/learn.yaml
+++ b/src/data/learn.yaml
@@ -4,24 +4,21 @@
 # The items property of the section uses the `id` of the files which is interpolated from Gatsby's Node fileAbsolutePath.
 # Note.: If an item here doesn't exist in the content folder it is ignored.
 # Note.: If your Markdown file is inside a subfolder, call it `index.md` and write here the name of the folder
-- section: 'Quick Start'
+- section: 'Getting Started'
   items:
     - node-introduction
     - node-history
     - node-installation
     - node-javascript-language
     - node-difference-browser
-- section: 'Getting Started'
+    - node-difference-dev-prod
+- section: 'Basics & Built-ins'
   items:
-    - v8-engine
-    - node-run-cli
-    - node-terminate-program
-    - node-environment-variables
-    - node-repl
-    - node-cli-args
-    - node-output-to-cli
-    - node-input-from-cli
     - node-export-module
+    - node-exceptions
+    - node-inspect-object
+- section: 'Node.js Package Manager'
+  items:
     - npm
     - where-npm-install-packages
     - how-to-use-npm-package
@@ -35,23 +32,43 @@
     - npm-packages-local-global
     - npm-dependencies-devdependencies
     - npx
+- section: 'Asyhnchronous Work'
+  items:
+    - node-control-flow
     - node-event-loop
     - node-process-nexttick
     - node-setimmediate
-    - javascript-timers
-    - javascript-callbacks
-    - javascript-promises
-    - javascript-async-await
     - node-event-emitter
-    - node-http-server
-    - node-make-http-requests
-    - node-request-data
+- section: 'Manipulating Files'
+  items:
     - node-file-descriptors
     - node-file-stats
     - node-file-paths
     - node-reading-files
     - node-writing-files
     - node-folders
+- section: 'Command Line'
+  items:
+    - node-run-cli
+    - node-terminate-program
+    - node-environment-variables
+    - node-repl
+    - node-cli-args
+    - node-output-to-cli
+    - node-input-from-cli
+- section: 'Node.js Web Server'
+  items:
+    - node-http-server
+    - node-make-http-requests
+    - node-request-data
+- section: 'JavaScript built-ins'
+  items:
+    - javascript-timers
+    - javascript-callbacks
+    - javascript-promises
+    - javascript-async-await
+- section: 'Node.js Modules'
+  items:
     - node-module-fs
     - node-module-path
     - node-module-os
@@ -59,9 +76,8 @@
     - node-module-http
     - node-buffers
     - nodejs-streams
-    - node-difference-dev-prod
-    - node-exceptions
-    - node-inspect-object
+- section: 'Node.js & World'
+  items:
     - node-with-typescript
-    - node-control-flow
     - node-with-web-assembly
+    - v8-engine
diff --git a/src/images/logos/github-logo.svg b/src/images/logos/github-logo.svg
index 6dec6a9e..1bf4a170 100644
--- a/src/images/logos/github-logo.svg
+++ b/src/images/logos/github-logo.svg
@@ -1,6 +1,6 @@
 <svg
-  width="2rem"
-  height="2rem"
+  width="1.8rem"
+  height="1.8rem"
   viewBox="0 0 438.549 438.549"
 >
   <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z" />
diff --git a/src/images/logos/slack-logo.svg b/src/images/logos/slack-logo.svg
index ab31d4ed..bab9273e 100644
--- a/src/images/logos/slack-logo.svg
+++ b/src/images/logos/slack-logo.svg
@@ -8,4 +8,4 @@
   <path d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387" />
   <path d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386" />
   <path d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387" />
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/images/logos/twitter-logo.svg b/src/images/logos/twitter-logo.svg
index 5f6ea202..66de2a26 100644
--- a/src/images/logos/twitter-logo.svg
+++ b/src/images/logos/twitter-logo.svg
@@ -22,4 +22,4 @@
     A  65,  65 0 0 1 630, 425
     Z"
   />
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
index 4f0abd9e..6e9d05fd 100644
--- a/src/pages/blog.tsx
+++ b/src/pages/blog.tsx
@@ -2,29 +2,42 @@ import { graphql } from 'gatsby';
 import React from 'react';
 import BlogCard from '../components/BlogCard';
 import Layout from '../components/Layout';
-import { BlogPostsList, BlogCategoriesList } from '../types';
+import SideNavBar from '../components/SideNavBar';
+import { BlogPostsList, BlogCategoriesList, SideNavBarItem } from '../types';
 
 type Props = {
   data: BlogPostsList & BlogCategoriesList;
 };
 
-const Blog = ({ data: { posts } }: Props): JSX.Element => (
+export const getNavigationData = (
+  categories: BlogCategoriesList['categories']
+): SideNavBarItem[] =>
+  categories.edges.map(({ node }) => ({
+    title: node.slug,
+    slug: `blog/${node.name}/`,
+  }));
+
+const Blog = ({ data: { posts, categories } }: Props): JSX.Element => (
   <Layout title="Blogs at Nodejs">
-    <div>
-      <div className="blog-category-container">
+    <main className="grid-container">
+      <SideNavBar
+        items={getNavigationData(categories)}
+        title="Blog Categories"
+      />
+      <div className="blog-grid-container">
         <div className="blog-category-header">
-          <h1>Node.js Blog</h1>
+          <h2>Node.js Blog</h2>
           <span>
             The latest Node.js news, case studies, tutorials, and resources.
           </span>
         </div>
+        <div className="blog-items">
+          {posts.edges.map(edge => (
+            <BlogCard key={edge.node.fields.slug} data={edge} />
+          ))}
+        </div>
       </div>
-      <div className="blog-grid-container">
-        {posts.edges.map(edge => (
-          <BlogCard key={edge.node.fields.slug} data={edge} />
-        ))}
-      </div>
-    </div>
+    </main>
   </Layout>
 );
 
diff --git a/src/pages/style-guide.tsx b/src/pages/style-guide.tsx
index 1986d33b..2c285293 100644
--- a/src/pages/style-guide.tsx
+++ b/src/pages/style-guide.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import '../styles/layout.scss';
+import '../styles/mobile.scss';
 
 const StyleGuidePage = (): JSX.Element => (
   <main style={{ maxWidth: `940px`, margin: `0 auto` }}>
diff --git a/src/styles/article-reader.scss b/src/styles/article-reader.scss
index 9636c5e5..5db2e58a 100644
--- a/src/styles/article-reader.scss
+++ b/src/styles/article-reader.scss
@@ -8,7 +8,7 @@
 }
 
 .article-reader {
-  padding: var(--space-24);
+  padding: var(--space-80) 0 0 var(--space-128);
   width: auto;
 
   hr {
diff --git a/src/styles/community.scss b/src/styles/community.scss
index 7ded48d3..44c9c4f4 100644
--- a/src/styles/community.scss
+++ b/src/styles/community.scss
@@ -51,6 +51,15 @@
 .community-nav__list {
   list-style: none;
   padding: 0 var(--space-20);
+
+  .side-nav__item--title {
+    margin-left: 0;
+
+    b {
+      color: var(--color-brand-primary);
+      font-weight: var(--font-weight-semibold);
+    }
+  }
 }
 
 .community-nav__sub-list {
diff --git a/src/styles/download.scss b/src/styles/download.scss
index ca2be962..9519824f 100644
--- a/src/styles/download.scss
+++ b/src/styles/download.scss
@@ -20,6 +20,7 @@
 
 @media (max-width: 975px) {
   .home-page.-download {
+    margin-top: 40px;
     width: 90%;
   }
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 01b22b57..1acc776f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,7 +1,3 @@
-:root {
-  color-scheme: light dark; // affects default colors of scrollbars
-}
-
 .home-page {
   --section-margin-bottom: 340px;
   margin: 0 auto;
@@ -26,7 +22,7 @@
 }
 
 .node-demo {
-  background: var(--black9);
+  background: var(--black10);
   border-radius: var(--space-04);
   box-shadow: 5px 10px 50px rgba(0, 0, 0, 0.25);
   color: var(--black0);
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 215a91c4..606b94ab 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -16,7 +16,7 @@ body {
   /* Set in JavaScript */
   --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
   --banner-gradient: linear-gradient(to right, var(--accent9), var(--info7));
-  --nav-height: 7.2rem;
+  --nav-height: 72px;
   --hero-height: 36rem;
   --brand-light: var(--brand3);
   --brand: var(--brand5);
@@ -293,15 +293,6 @@ select {
   height: var(--space-32);
 }
 
-.nav__tabs__container {
-  align-items: center;
-  display: flex;
-  justify-self: flex-start;
-  list-style: none;
-  margin: 0 0 0 120px;
-  margin-right: auto;
-}
-
 .nav .right-container {
   align-items: center;
   display: flex;
@@ -311,47 +302,58 @@ select {
   margin: 0;
   padding-left: 0;
 
-  > li:first-child {
+  .nav__tabs:first-child {
     flex-grow: 1;
-    height: 3em;
+    height: 40px;
     justify-content: flex-end;
     position: relative;
   }
-
-  .nav__tabs {
-    padding: var(--space-24) var(--space-16) var(--space-24) 0;
-  }
 }
 
 .nav__tabs {
-  color: green;
+  align-items: center;
   cursor: pointer;
   display: flex;
   margin-left: var(--space-16);
-  padding: var(--space-24) var(--space-16);
 
-  > a {
-    color: var(--color-text-primary);
-    text-decoration: none;
+  &__container {
+    align-items: center;
+    display: flex;
+    justify-self: flex-start;
+    list-style: none;
+    margin: 0 0 0 120px;
+    margin-right: auto;
+
+    .nav__tabs > a {
+      color: var(--color-text-primary);
+      padding: calc(var(--space-32) + var(--space-04)) var(--space-16);
+      text-decoration: none;
+
+      &.active {
+        border-bottom: 4px solid var(--color-brand-primary);
+        margin-bottom: -4px;
+      }
+
+      &.activeStyleTab:hover {
+        border-bottom: 4px solid var(--color-text-primary);
+        margin-bottom: -4px;
+      }
+    }
   }
-}
 
-.activeStyleTab:hover {
-  border-bottom: 4px solid var(--color-text-primary);
-  margin-bottom: -4px;
-}
+  > a {
+    line-height: 0;
+  }
 
-.active {
-  border-bottom: 4px solid green;
-  margin-bottom: -4px;
+  &:last-child {
+    margin-right: var(--space-08);
+  }
 }
 
 /* Start: Article Reader HTML Reset */
 
 .article-reader {
   max-width: 768px;
-  padding-left: 4.2rem;
-  padding-top: var(--space-80);
   width: calc(100% - 36rem);
 
   hr {
@@ -391,6 +393,24 @@ select {
 
 /* End: Article Reader HTML Reset */
 
+.blog-grid-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 840px;
+  padding: var(--space-80) 0 0 var(--space-128);
+
+  .blog-category-header {
+    h2 {
+      margin: 0 0 20px 0;
+    }
+  }
+
+  .blog-items {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  }
+}
+
 /* TOC */
 
 details {
@@ -473,124 +493,12 @@ h6:hover .autolink-headers {
   height: 40px;
 }
 
-@media (max-width: 1050px) {
-  .nav__tabs__container {
-    margin: 0;
-  }
-}
-
-@media (max-width: 800px) {
-  main {
-    display: flex;
-    flex-flow: column;
-  }
-
-  thead {
-    tr {
-      th {
-        padding: var(--space-14) var(--space-12) var(--space-14);
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      td {
-        padding: var(--space-14) var(--space-12) var(--space-14);
-      }
-    }
-  }
-
-  .article-reader {
-    padding: 0 3rem;
-  }
-
-  .nav__container {
-    align-items: start;
-    flex-flow: wrap;
-    min-height: calc(1 * var(--nav-height));
-    padding: 0 var(--space-12);
-  }
-
-  .logo {
-    align-items: center;
-    display: flex;
-    height: var(--nav-height);
-  }
-
-  .nav__logo {
-    height: 2.4rem;
-  }
-
-  .nav__tabs__container {
-    background: var(--color-fill-app);
-    height: var(--nav-height);
-    justify-content: center;
-    order: 3;
-    padding: 0;
-    width: 100%;
-  }
-
-  .nav .right-container {
-    justify-content: center;
-    padding: 0;
-    width: 100%;
-
-    .nav__tabs {
-      padding: var(--space-04);
-    }
-  }
-
-  .nav__tabs {
-    display: flex;
-    margin-left: 0;
-    padding: var(--space-08);
-
-    &:not(:last-child) {
-      margin-right: 0.5rem;
-    }
-  }
-
-  .language-switch {
-    padding: 0;
-  }
-}
-
 .layout-container {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 }
 
-.blog-grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-}
-
-.blog-category-container {
-  .blog-category-header {
-    padding: 40px 0 0 40px;
-
-    h1 {
-      margin: 0 0 20px 0;
-    }
-  }
-}
-
-.blog-category-container,
-.blog-grid-container {
-  margin: 0 auto;
-  width: 75%;
-
-  @media only screen and (max-width: 1000px) {
-    width: 80%;
-  }
-
-  @media only screen and (max-width: 800px) {
-    width: 100%;
-  }
-}
-
 .blog-container {
   grid-gap: var(--space-24);
 }
@@ -623,3 +531,9 @@ h6:hover .autolink-headers {
   justify-content: stretch;
   width: fit-content;
 }
+
+@media (max-width: 1050px) {
+  .nav__tabs__container {
+    margin: 0;
+  }
+}
diff --git a/src/styles/learn.scss b/src/styles/learn.scss
index a0cab720..d4d6b750 100644
--- a/src/styles/learn.scss
+++ b/src/styles/learn.scss
@@ -10,15 +10,10 @@
   overflow-x: hidden;
   padding: 0 var(--space-20);
   position: sticky;
-  top: calc(var(--nav-height) + var(--space-12) + 2px);
+  top: var(--nav-height);
   width: 100%;
   z-index: 998;
 
-  & > :last-child {
-    /* To allow side menu to scroll to bottom when not sticky */
-    padding-bottom: 230px;
-  }
-
   &__title {
     align-items: center;
     background-color: var(--color-fill-side-nav);
@@ -37,18 +32,22 @@
     margin: 0;
     padding: 0;
     position: relative;
+
+    &:first-of-type {
+      margin-top: var(--space-40);
+    }
   }
 
   &__item {
     align-items: center;
     border-radius: 4px;
     box-sizing: border-box;
-    color: var(--color-text-primary);
+    color: var(--color-text-secondary);
     cursor: pointer;
     display: block;
     list-style: none;
     margin: 0 0 0 var(--space-24);
-    padding: calc(var(--space-12) / 2) 0 calc(var(--space-12) / 2)
+    padding: calc(var(--space-12) / 2) 0 calc(var(--space-24) / 2)
       var(--space-08);
     position: relative;
     text-decoration: none;
@@ -60,15 +59,15 @@
     &::before {
       background-size: 2.4rem;
       border-radius: 50%;
-      box-shadow: inset 0 0 0 2px var(--color-border-accent);
+      box-shadow: inset 0 0 0 3px var(--color-border-primary);
       box-sizing: border-box;
+      color: white;
       content: ' ';
       display: block;
       height: 2.4rem;
       left: -2.4rem;
-      line-height: 2.6rem;
       overflow: hidden;
-      padding: 2px 4px;
+      padding: 3px 5px;
       position: absolute;
       top: 0.6rem;
       transition: box-shadow 0.28s;
@@ -76,7 +75,8 @@
     }
 
     &--done::before {
-      content: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0OC44IDQ0OC44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDguOCA0NDguODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjaGVjayI+CgkJPHBvbHlnb24gcG9pbnRzPSIxNDIuOCwzMjMuODUgMzUuNywyMTYuNzUgMCwyNTIuNDUgMTQyLjgsMzk1LjI1IDQ0OC44LDg5LjI1IDQxMy4xLDUzLjU1ICAgIiBmaWxsPSIjZjVmNmY3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==');
+      content: '\e876';
+      font-family: 'Material Icons', sans-serif;
     }
 
     &--active {
@@ -84,25 +84,51 @@
       font-weight: 600;
     }
 
+    &--title {
+      color: var(--color-text-primary);
+      display: flex;
+      flex-direction: row;
+      font-weight: 600;
+      justify-content: space-between;
+      margin: var(--space-24) 0 var(--space-16) var(--space-24);
+
+      i {
+        padding: 0;
+      }
+    }
+
     &--done::before,
     &--active::before {
       box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
     }
 
     &:hover::before {
-      box-shadow: inset 0 0 0 2.4rem var(--color-border-accent) !important;
+      box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
+    }
+
+    &--title::before,
+    &--title:hover::before {
+      box-shadow: inset 0 0 0 3px var(--color-text-primary);
     }
 
     &::after {
-      background: var(--color-border-accent);
+      background: var(--color-border-primary);
       content: ' ';
       display: block;
-      height: calc(100% - 1.2rem - 8px);
+      height: calc(100% - 1.2rem - 12px);
       left: calc(-1.2rem - 1px);
       position: absolute;
-      top: calc(2.4rem + 4px);
+      top: calc(2.4rem + 6px);
       width: 2px;
     }
+
+    &--done::after {
+      background: var(--color-border-accent);
+    }
+
+    &--title::after {
+      background: transparent;
+    }
   }
 
   &__open {
@@ -176,7 +202,7 @@
       overflow: hidden;
       position: fixed;
       right: 0;
-      top: 95px;
+      top: 86px;
 
       &--open {
         height: auto;
diff --git a/src/styles/mobile.scss b/src/styles/mobile.scss
index 2f6391c6..6f26c718 100644
--- a/src/styles/mobile.scss
+++ b/src/styles/mobile.scss
@@ -56,7 +56,7 @@
   }
 
   body {
-    --nav-height: 5.2rem;
+    --nav-height: 42px;
     --banner-clip: polygon(
       0 0,
       100% 0,
@@ -65,22 +65,122 @@
     );
   }
 
-  .blog-grid-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  main {
+    display: flex;
+    flex-flow: column;
+  }
+
+  thead {
+    tr {
+      th {
+        padding: var(--space-14) var(--space-12) var(--space-14);
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      td {
+        padding: var(--space-14) var(--space-12) var(--space-14);
+      }
+    }
+  }
+
+  .article-reader {
+    padding: 0 3rem;
+  }
+
+  .nav__container {
+    align-items: start;
+    flex-flow: wrap;
+    min-height: calc(1 * var(--nav-height));
+    padding: 0 var(--space-12);
   }
 
-  .blog-card,
-  .blog-category-container .blog-category-header {
-    padding: 10px 20px !important;
+  .logo {
+    align-items: center;
+    display: flex;
+    height: var(--nav-height);
+  }
+
+  .nav__logo {
+    height: 2.4rem;
+  }
+
+  .nav .right-container {
+    justify-content: center;
+    padding: 0;
+    width: 100%;
+
+    .nav__tabs,
+    .nav__tabs:first-child {
+      height: 3em;
+    }
+  }
+
+  .nav__tabs {
+    display: flex;
+    margin-left: 0;
+
+    &__container {
+      background: var(--color-fill-app);
+      height: var(--nav-height);
+      justify-content: center;
+      order: 3;
+      padding: 0;
+      width: 100%;
+
+      .nav__tabs > a {
+        padding: var(--space-08);
+      }
+    }
+
+    &:not(:last-child) {
+      margin-right: 0.5rem;
+    }
+  }
+
+  .language-switch {
+    padding: 0;
+  }
+
+  .blog-grid-container {
+    padding: 0 3rem;
+
+    .blog-category-header {
+      padding: 80px 0 0 20px;
+    }
+
+    .blog-items {
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+
+    .blog-card {
+      padding: 10px 20px;
+    }
   }
 
   [data-browser='legacy'] .side-nav__title {
     background-position: 0 calc(-50vh + var(--magic-hero-number) - 32px);
   }
 
-  /* Place top sentinels higher up on mobile */
+  .download-additional {
+    &__header {
+      align-items: center;
+      flex-direction: column;
+    }
+
+    &__title {
+      padding-bottom: var(--space-12);
+    }
+  }
 
+  .download-releases__title {
+    margin: 50px 0 20px 0 !important;
+    text-align: center;
+  }
+
+  /* Place top sentinels higher up on mobile */
   .sticky-sentinel--top {
     top: -92px;
   }
diff --git a/src/styles/tokens.scss b/src/styles/tokens.scss
index e9545436..eb7957d2 100644
--- a/src/styles/tokens.scss
+++ b/src/styles/tokens.scss
@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');
-
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 html {
diff --git a/src/templates/blogCategory.tsx b/src/templates/blogCategory.tsx
index bb5098f3..36780f18 100644
--- a/src/templates/blogCategory.tsx
+++ b/src/templates/blogCategory.tsx
@@ -2,26 +2,36 @@ import { graphql } from 'gatsby';
 import React from 'react';
 import BlogCard from '../components/BlogCard';
 import Layout from '../components/Layout';
-import { BlogPostsList, BlogCategory } from '../types';
+import SideNavBar from '../components/SideNavBar';
+import { getNavigationData } from '../pages/blog';
+import { BlogPostsList, BlogCategory, BlogCategoriesList } from '../types';
 
 type Props = {
-  data: BlogPostsList & { category: BlogCategory };
+  data: BlogPostsList & { category: BlogCategory } & BlogCategoriesList;
 };
 
-const Blog = ({ data: { posts, category } }: Props): JSX.Element => (
+const Blog = ({
+  data: { posts, category, categories },
+}: Props): JSX.Element => (
   <Layout title="Blogs at Nodejs">
-    <div>
-      <div className="blog-category-container">
+    <main className="grid-container">
+      <SideNavBar
+        items={getNavigationData(categories)}
+        pageKey={`blog/${category.name}/`}
+        title="Blog Categories"
+      />
+      <div className="blog-grid-container">
         <div className="blog-category-header">
-          <h1>{category.slug}</h1>
+          <h2>{category.slug}</h2>
+          <span>{category.description}</span>
+        </div>
+        <div className="blog-items">
+          {posts.edges.map(edge => (
+            <BlogCard key={edge.node.fields.slug} data={edge} />
+          ))}
         </div>
       </div>
-      <div className="blog-grid-container">
-        {posts.edges.map(edge => (
-          <BlogCard key={edge.node.fields.slug} data={edge} />
-        ))}
-      </div>
-    </div>
+    </main>
   </Layout>
 );
 
@@ -58,6 +68,15 @@ export const pageQuery = graphql`
     category: categoriesYaml(name: { eq: $categoryName }) {
       name
       slug
+      description
+    }
+    categories: allCategoriesYaml {
+      edges {
+        node {
+          name
+          slug
+        }
+      }
     }
   }
 `;
diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx
index 921c847b..3130392a 100644
--- a/src/templates/learn.tsx
+++ b/src/templates/learn.tsx
@@ -25,38 +25,27 @@ const LearnLayout = ({
     },
   },
   pageContext: { slug, next, previous, relativePath, navigationData },
-}: Props): JSX.Element => {
-  let previousSlug = '';
-
-  if (typeof window !== 'undefined' && window.previousPath) {
-    previousSlug =
-      window.previousPath.split('/learn')[1]?.substr(1) ||
-      'introduction-to-nodejs';
-  }
-
-  return (
-    <Layout title={title} description={description}>
-      <main className="grid-container">
-        <Navigation
-          currentSlug={slug}
-          previousSlug={previousSlug}
-          label="Secondary"
-          sections={navigationData}
-          category="learn"
-        />
-        <Article
-          title={title}
-          body={body}
-          tableOfContents={tableOfContents}
-          next={next}
-          authors={authors}
-          previous={previous}
-          relativePath={relativePath}
-        />
-      </main>
-    </Layout>
-  );
-};
+}: Props): JSX.Element => (
+  <Layout title={title} description={description}>
+    <main className="grid-container">
+      <Navigation
+        currentSlug={slug}
+        label="Secondary"
+        sections={navigationData}
+        category="learn"
+      />
+      <Article
+        title={title}
+        body={body}
+        tableOfContents={tableOfContents}
+        next={next}
+        authors={authors}
+        previous={previous}
+        relativePath={relativePath}
+      />
+    </main>
+  </Layout>
+);
 
 export default connectGraphQlCustom(LearnLayout);
 
diff --git a/src/types/index.ts b/src/types/index.ts
index 8afa9e35..b85e9317 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -63,6 +63,7 @@ export interface PaginationInfo {
 export interface BlogCategory {
   name: string;
   slug: string;
+  description?: string;
 }
 
 export interface NavigationSectionItem {
@@ -70,6 +71,7 @@ export interface NavigationSectionItem {
   title: string;
   section: string;
   category: string;
+  baseUrl?: string;
 }
 
 export interface NavigationSectionData {
@@ -148,7 +150,7 @@ export interface BlogPostsList {
 
 export interface BlogCategoriesList {
   categories: {
-    edges: BlogCategory[];
+    edges: { node: BlogCategory }[];
   };
 }
 
diff --git a/src/util/scrollTo.tsx b/src/util/scrollTo.tsx
deleted file mode 100644
index 3b4e0da6..00000000
--- a/src/util/scrollTo.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { isMobileScreen } from './isScreenWithinWidth';
-
-/* eslint-disable */
-// this is from stack overflow I assume
-const easeInOutCubic = (t: number, b: number, c: number, d: number) =>
-  (t /= d / 2) < 1
-    ? (c / 2) * t * t * t + b
-    : (c / 2) * ((t -= 2) * t * t + 2) + b;
-/* eslint-enable */
-
-export function scrollTo(
-  scrollToPoint: number,
-  element: HTMLElement | null = null,
-  duration = 333
-): Promise<boolean> {
-  const start =
-    ((element && element.scrollTop) ||
-      window.pageYOffset ||
-      document.documentElement.scrollTop) -
-    ((element && element.clientTop) || 0);
-  const change = scrollToPoint - start;
-  let previousTime = window.performance.now();
-  let currentTime = 0;
-
-  return new Promise<boolean>((resolve): void => {
-    const animateScroll = (): void => {
-      const time = window.performance.now();
-      const increment = time - previousTime;
-      previousTime = time;
-      currentTime += increment;
-      (element || document.scrollingElement || window).scrollTo(
-        0,
-        easeInOutCubic(currentTime, start, change, duration)
-      );
-      if (currentTime < duration) {
-        window.requestAnimationFrame(animateScroll);
-      }
-      resolve(true);
-    };
-    animateScroll();
-  });
-}
-
-const SPEED_MODIFIER = 0.9;
-const BASE_TIME = 500;
-
-interface ScrollParams {
-  newScrollPos: number;
-  scrollWindow: null | HTMLElement;
-  scrollTime: number;
-}
-
-export const calcNavScrollParams = (
-  linkHeight: number,
-  navElement: HTMLElement
-): ScrollParams => {
-  const navRect = navElement.getBoundingClientRect();
-  let newScrollPos: number;
-  const scrollWindow = navElement;
-  if (isMobileScreen()) {
-    // phone
-    newScrollPos = linkHeight - window.screen.height / 2;
-  } else {
-    // tablet
-    newScrollPos =
-      linkHeight -
-      navRect.top -
-      (navElement.offsetHeight - navElement.offsetTop) / 2;
-  }
-  const scrollTime = newScrollPos * SPEED_MODIFIER + BASE_TIME;
-
-  return {
-    newScrollPos,
-    scrollWindow,
-    scrollTime,
-  };
-};


Test patch:
diff --git a/src/components/Article/__tests__/__snapshots__/article.test.tsx.snap b/src/components/Article/__tests__/__snapshots__/article.test.tsx.snap
index 9262fb43..606f11fc 100644
--- a/src/components/Article/__tests__/__snapshots__/article.test.tsx.snap
+++ b/src/components/Article/__tests__/__snapshots__/article.test.tsx.snap
@@ -10,33 +10,6 @@ exports[`Article component renders correctly 1`] = `
     >
       test-title
     </h1>
-    <details
-      class="toc"
-    >
-      <summary>
-        <h6>
-          TABLE OF CONTENTS
-        </h6>
-      </summary>
-      <ul
-        class="tableOfContents"
-      >
-        <li>
-          <a
-            href="#mock-title"
-          >
-            mock-title
-          </a>
-        </li>
-        <li>
-          <a
-            href="#mock-title-2"
-          >
-            mock-title-2
-          </a>
-        </li>
-      </ul>
-    </details>
     <div>
       <p>
         Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -255,33 +228,6 @@ exports[`Article component renders correctly in case body ref is null 1`] = `
     >
       test-title
     </h1>
-    <details
-      class="toc"
-    >
-      <summary>
-        <h6>
-          TABLE OF CONTENTS
-        </h6>
-      </summary>
-      <ul
-        class="tableOfContents"
-      >
-        <li>
-          <a
-            href="#mock-title"
-          >
-            mock-title
-          </a>
-        </li>
-        <li>
-          <a
-            href="#mock-title-2"
-          >
-            mock-title-2
-          </a>
-        </li>
-      </ul>
-    </details>
     <div>
       <p>
         Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -428,33 +374,6 @@ exports[`Article component should accept and render child components 1`] = `
     >
       test-title
     </h1>
-    <details
-      class="toc"
-    >
-      <summary>
-        <h6>
-          TABLE OF CONTENTS
-        </h6>
-      </summary>
-      <ul
-        class="tableOfContents"
-      >
-        <li>
-          <a
-            href="#mock-title"
-          >
-            mock-title
-          </a>
-        </li>
-        <li>
-          <a
-            href="#mock-title-2"
-          >
-            mock-title-2
-          </a>
-        </li>
-      </ul>
-    </details>
     <div>
       <p>
         Node.js can be installed in different ways. This post highlights the most common and convenient ones.
diff --git a/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap b/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
index 57a277fa..72c8d0ee 100644
--- a/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
+++ b/src/components/Footer/__tests__/__snapshots__/footer.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`Tests for Footer component renders correctly 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/blog/"
+          href="/blog"
         >
           Blog
         </a>
diff --git a/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap b/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
index 2caadc39..8e90ee05 100644
--- a/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
+++ b/src/components/Header/__tests__/__snapshots__/header.test.tsx.snap
@@ -90,12 +90,11 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
             </span>
             <div
               class="searchBarContainer"
-              style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+              style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
             >
               <div
                 class="searchInputContainer"
-                role="button"
-                tabindex="0"
+                role="presentation"
               >
                 <i
                   class="material-icons searchIcon"
@@ -144,6 +143,25 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
               </i>
             </button>
           </li>
+          <li
+            class="nav__tabs"
+          >
+            <a
+              href="https://github.com/nodejs/nodejs.dev"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span
+                class="sr-only"
+              >
+                GitHub
+              </span>
+              <svg
+                fill="var(--color-text-accent)"
+                style="padding: 1rem; width: 2rem; height: 2rem;"
+              />
+            </a>
+          </li>
         </ul>
       </div>
     </div>
@@ -241,12 +259,11 @@ exports[`Tests for Header component renders correctly 1`] = `
             </span>
             <div
               class="searchBarContainer"
-              style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+              style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
             >
               <div
                 class="searchInputContainer"
-                role="button"
-                tabindex="0"
+                role="presentation"
               >
                 <i
                   class="material-icons searchIcon"
@@ -295,6 +312,25 @@ exports[`Tests for Header component renders correctly 1`] = `
               </i>
             </button>
           </li>
+          <li
+            class="nav__tabs"
+          >
+            <a
+              href="https://github.com/nodejs/nodejs.dev"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span
+                class="sr-only"
+              >
+                GitHub
+              </span>
+              <svg
+                fill="var(--color-text-accent)"
+                style="padding: 1rem; width: 2rem; height: 2rem;"
+              />
+            </a>
+          </li>
         </ul>
       </div>
     </div>
@@ -406,6 +442,25 @@ exports[`Tests for Header component renders shorter menu items for mobile 1`] =
               </i>
             </button>
           </li>
+          <li
+            class="nav__tabs"
+          >
+            <a
+              href="https://github.com/nodejs/nodejs.dev"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span
+                class="sr-only"
+              >
+                GitHub
+              </span>
+              <svg
+                fill="var(--color-text-accent)"
+                style="padding: 1rem; width: 2rem; height: 2rem;"
+              />
+            </a>
+          </li>
         </ul>
       </div>
     </div>
diff --git a/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
index 23a62191..3d5f8c75 100644
--- a/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap
@@ -90,12 +90,11 @@ exports[`CenteredLayout component renders correctly with footer 1`] = `
             </span>
             <div
               class="searchBarContainer"
-              style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+              style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
             >
               <div
                 class="searchInputContainer"
-                role="button"
-                tabindex="0"
+                role="presentation"
               >
                 <i
                   class="material-icons searchIcon"
@@ -144,6 +143,25 @@ exports[`CenteredLayout component renders correctly with footer 1`] = `
               </i>
             </button>
           </li>
+          <li
+            class="nav__tabs"
+          >
+            <a
+              href="https://github.com/nodejs/nodejs.dev"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span
+                class="sr-only"
+              >
+                GitHub
+              </span>
+              <svg
+                fill="var(--color-text-accent)"
+                style="padding: 1rem; width: 2rem; height: 2rem;"
+              />
+            </a>
+          </li>
         </ul>
       </div>
     </div>
@@ -202,7 +220,7 @@ exports[`CenteredLayout component renders correctly with footer 1`] = `
       <li>
         <a
           class="footer__link"
-          href="https://nodejs.org/en/blog/"
+          href="/blog"
         >
           Blog
         </a>
@@ -350,12 +368,11 @@ exports[`CenteredLayout component renders correctly without footer 1`] = `
             </span>
             <div
               class="searchBarContainer"
-              style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+              style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
             >
               <div
                 class="searchInputContainer"
-                role="button"
-                tabindex="0"
+                role="presentation"
               >
                 <i
                   class="material-icons searchIcon"
@@ -404,6 +421,25 @@ exports[`CenteredLayout component renders correctly without footer 1`] = `
               </i>
             </button>
           </li>
+          <li
+            class="nav__tabs"
+          >
+            <a
+              href="https://github.com/nodejs/nodejs.dev"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <span
+                class="sr-only"
+              >
+                GitHub
+              </span>
+              <svg
+                fill="var(--color-text-accent)"
+                style="padding: 1rem; width: 2rem; height: 2rem;"
+              />
+            </a>
+          </li>
         </ul>
       </div>
     </div>
diff --git a/src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap
index 3db947f0..9ee94539 100644
--- a/src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Layout component renders correctly with data 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Layout component renders correctly with data 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
diff --git a/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap b/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
index 77810a30..8ed4383d 100644
--- a/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
+++ b/src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`PageLayout component renders correctly with data 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`PageLayout component renders correctly with data 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -162,33 +180,6 @@ exports[`PageLayout component renders correctly with data 1`] = `
         >
           mock-title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -335,7 +326,7 @@ exports[`PageLayout component renders correctly with data 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/src/components/NavigationSection/__tests__/__snapshots__/navigation-section.test.tsx.snap b/src/components/NavigationSection/__tests__/__snapshots__/navigation-section.test.tsx.snap
index 1727102e..710a1191 100644
--- a/src/components/NavigationSection/__tests__/__snapshots__/navigation-section.test.tsx.snap
+++ b/src/components/NavigationSection/__tests__/__snapshots__/navigation-section.test.tsx.snap
@@ -5,23 +5,29 @@ exports[`NavigationSection component renders correctly 1`] = `
   <ul
     class="side-nav__list"
   >
-    <h2
-      class="t-body2 side-nav__title"
+    <div
+      class="t-body2 side-nav__item side-nav__item--title"
+      role="menuitem"
+      tabindex="0"
     >
+      Introduction
       <i
         class="material-icons"
       >
-        offline_bolt
+        arrow_drop_up
       </i>
-      Introduction
-    </h2>
-    <a
-      class="t-body2 side-nav__item"
-      href="/learn/intro"
-      id="link-intro"
+    </div>
+    <div
+      style="display: none;"
     >
-      Section 1
-    </a>
+      <a
+        class="t-body2 side-nav__item"
+        href="/learn/intro"
+        id="link-intro"
+      >
+        Section 1
+      </a>
+    </div>
   </ul>
 </div>
 `;
diff --git a/src/components/SearchBar/__tests__/__snapshots__/SearchInput.test.tsx.snap b/src/components/SearchBar/__tests__/__snapshots__/SearchInput.test.tsx.snap
index e8d2a31d..a8e46b63 100644
--- a/src/components/SearchBar/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/src/components/SearchBar/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -7,12 +7,11 @@ Object {
     <div>
       <div
         class="searchBarContainer"
-        style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+        style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
       >
         <div
           class="searchInputContainer"
-          role="button"
-          tabindex="0"
+          role="presentation"
         >
           <i
             class="material-icons searchIcon"
@@ -41,12 +40,11 @@ Object {
   "container": <div>
     <div
       class="searchBarContainer"
-      style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+      style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
     >
       <div
         class="searchInputContainer"
-        role="button"
-        tabindex="0"
+        role="presentation"
       >
         <i
           class="material-icons searchIcon"
diff --git a/src/components/Toc/__tests__/__snapshots__/toc.test.tsx.snap b/src/components/Toc/__tests__/__snapshots__/toc.test.tsx.snap
index 2c4f267c..17031fb7 100644
--- a/src/components/Toc/__tests__/__snapshots__/toc.test.tsx.snap
+++ b/src/components/Toc/__tests__/__snapshots__/toc.test.tsx.snap
@@ -2,34 +2,4 @@
 
 exports[`TOC component render empty div without a table of contents 1`] = `<div />`;
 
-exports[`TOC component renders correctly 1`] = `
-<div>
-  <details
-    class="toc"
-  >
-    <summary>
-      <h6>
-        TABLE OF CONTENTS
-      </h6>
-    </summary>
-    <ul
-      class="tableOfContents"
-    >
-      <li>
-        <a
-          href="#mock-title"
-        >
-          mock-title
-        </a>
-      </li>
-      <li>
-        <a
-          href="#mock-title-2"
-        >
-          mock-title-2
-        </a>
-      </li>
-    </ul>
-  </details>
-</div>
-`;
+exports[`TOC component renders correctly 1`] = `<div />`;
diff --git a/src/containers/Navigation/__tests__/__snapshots__/navigation.test.tsx.snap b/src/containers/Navigation/__tests__/__snapshots__/navigation.test.tsx.snap
index 7d89b2e1..8ed98f45 100644
--- a/src/containers/Navigation/__tests__/__snapshots__/navigation.test.tsx.snap
+++ b/src/containers/Navigation/__tests__/__snapshots__/navigation.test.tsx.snap
@@ -15,23 +15,29 @@ exports[`Navigation component renders correctly 1`] = `
     <ul
       class="side-nav__list"
     >
-      <h2
-        class="t-body2 side-nav__title"
+      <div
+        class="t-body2 side-nav__item side-nav__item--title"
+        role="menuitem"
+        tabindex="0"
       >
+        Getting Started
         <i
           class="material-icons"
         >
-          offline_bolt
+          arrow_drop_down
         </i>
-        Getting Started
-      </h2>
-      <a
-        class="t-body2 side-nav__item side-nav__item--active"
-        href="/learn/intro"
-        id="link-intro"
+      </div>
+      <div
+        style="display: block;"
       >
-        Section 1
-      </a>
+        <a
+          class="t-body2 side-nav__item side-nav__item--active"
+          href="/learn/intro"
+          id="link-intro"
+        >
+          Section 1
+        </a>
+      </div>
     </ul>
   </nav>
 </div>
diff --git a/src/containers/Navigation/__tests__/navigation.test.tsx b/src/containers/Navigation/__tests__/navigation.test.tsx
index 42995695..aa3c9a26 100644
--- a/src/containers/Navigation/__tests__/navigation.test.tsx
+++ b/src/containers/Navigation/__tests__/navigation.test.tsx
@@ -32,7 +32,6 @@ describe('Navigation component', (): void => {
             category: 'category2',
           },
         }}
-        previousSlug=""
         label=""
       />
     );
diff --git a/test/pages/__snapshots__/404.test.tsx.snap b/test/pages/__snapshots__/404.test.tsx.snap
index 733c5795..4dcf682f 100644
--- a/test/pages/__snapshots__/404.test.tsx.snap
+++ b/test/pages/__snapshots__/404.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`404 page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`404 page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -219,7 +237,7 @@ exports[`404 page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/about.test.tsx.snap b/test/pages/__snapshots__/about.test.tsx.snap
index c1a430ac..778e6353 100644
--- a/test/pages/__snapshots__/about.test.tsx.snap
+++ b/test/pages/__snapshots__/about.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`About page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`About page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`About page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community side-nav__item-community--active"
             href="/about"
@@ -246,33 +276,6 @@ exports[`About page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`About page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/blog.test.tsx.snap b/test/pages/__snapshots__/blog.test.tsx.snap
index f8cfdb36..a5ca7d40 100644
--- a/test/pages/__snapshots__/blog.test.tsx.snap
+++ b/test/pages/__snapshots__/blog.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Blog page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,70 +146,117 @@ exports[`Blog page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
     </nav>
-    <div>
+    <main
+      class="grid-container"
+    >
+      <nav
+        class="side-nav-about"
+      >
+        <button
+          class="side-nav__open"
+          type="button"
+        >
+          Menu
+        </button>
+        <ul
+          class="community-nav__list"
+        >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Blog Categories
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
+        </ul>
+      </nav>
       <div
-        class="blog-category-container"
+        class="blog-grid-container"
       >
         <div
           class="blog-category-header"
         >
-          <h1>
+          <h2>
             Node.js Blog
-          </h1>
+          </h2>
           <span>
             The latest Node.js news, case studies, tutorials, and resources.
           </span>
         </div>
-      </div>
-      <div
-        class="blog-grid-container"
-      >
         <div
-          class="blog-card"
+          class="blog-items"
         >
           <div
-            class="title"
+            class="blog-card"
           >
-            <a
-              href="Mock blog slug"
-            >
-              Mock blog title
-            </a>
             <div
-              class="metadata"
+              class="title"
             >
               <a
-                class="category"
-                href="/blog/mock-category/"
+                href="Mock blog slug"
               >
-                Mock Category Slug
+                Mock blog title
               </a>
-              <span>
-                1 min read
-              </span>
+              <div
+                class="metadata"
+              >
+                <a
+                  class="category"
+                  href="/blog/mock-category/"
+                >
+                  Mock Category Slug
+                </a>
+                <span>
+                  1 min read
+                </span>
+              </div>
+            </div>
+            <div
+              class="content"
+            >
+              <h4>
+                Mock date
+              </h4>
+              <p>
+                by
+                 
+                <span>
+                  Mock author name
+                </span>
+              </p>
             </div>
-          </div>
-          <div
-            class="content"
-          >
-            <h4>
-              Mock date
-            </h4>
-            <p>
-              by
-               
-              <span>
-                Mock author name
-              </span>
-            </p>
           </div>
         </div>
       </div>
-    </div>
+    </main>
     <footer
       class="footer"
     >
@@ -260,7 +306,7 @@ exports[`Blog page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
@@ -412,12 +458,11 @@ exports[`Blog page renders correctly for empty blogs list 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -466,29 +511,76 @@ exports[`Blog page renders correctly for empty blogs list 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
     </nav>
-    <div>
+    <main
+      class="grid-container"
+    >
+      <nav
+        class="side-nav-about"
+      >
+        <button
+          class="side-nav__open"
+          type="button"
+        >
+          Menu
+        </button>
+        <ul
+          class="community-nav__list"
+        >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Blog Categories
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
+        </ul>
+      </nav>
       <div
-        class="blog-category-container"
+        class="blog-grid-container"
       >
         <div
           class="blog-category-header"
         >
-          <h1>
+          <h2>
             Node.js Blog
-          </h1>
+          </h2>
           <span>
             The latest Node.js news, case studies, tutorials, and resources.
           </span>
         </div>
+        <div
+          class="blog-items"
+        />
       </div>
-      <div
-        class="blog-grid-container"
-      />
-    </div>
+    </main>
     <footer
       class="footer"
     >
@@ -538,7 +630,7 @@ exports[`Blog page renders correctly for empty blogs list 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/community.test.tsx.snap b/test/pages/__snapshots__/community.test.tsx.snap
index 46410ade..3d481c3d 100644
--- a/test/pages/__snapshots__/community.test.tsx.snap
+++ b/test/pages/__snapshots__/community.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Community Page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Community Page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`Community Page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`Community Page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`Community Page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/governance.test.tsx.snap b/test/pages/__snapshots__/governance.test.tsx.snap
index 3a467c03..b6d43ba7 100644
--- a/test/pages/__snapshots__/governance.test.tsx.snap
+++ b/test/pages/__snapshots__/governance.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Governance Page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Governance Page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`Governance Page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`Governance Page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`Governance Page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/home.test.tsx.snap b/test/pages/__snapshots__/home.test.tsx.snap
index e6f02f97..bde3e4b9 100644
--- a/test/pages/__snapshots__/home.test.tsx.snap
+++ b/test/pages/__snapshots__/home.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Home page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Home page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -544,7 +562,7 @@ exports[`Home page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
@@ -696,12 +714,11 @@ exports[`Home page renders i18n when feature toggle is present 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -790,6 +807,25 @@ exports[`Home page renders i18n when feature toggle is present 1`] = `
                 </li>
               </ul>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -1187,7 +1223,7 @@ exports[`Home page renders i18n when feature toggle is present 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/privacy.test.tsx.snap b/test/pages/__snapshots__/privacy.test.tsx.snap
index 9819611f..919855c8 100644
--- a/test/pages/__snapshots__/privacy.test.tsx.snap
+++ b/test/pages/__snapshots__/privacy.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Privacy Page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Privacy Page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`Privacy Page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`Privacy Page renders correctly 1`] = `
         >
           Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`Privacy Page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/releases.test.tsx.snap b/test/pages/__snapshots__/releases.test.tsx.snap
index 3a5cce88..d3cb8d25 100644
--- a/test/pages/__snapshots__/releases.test.tsx.snap
+++ b/test/pages/__snapshots__/releases.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Releases page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Releases page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`Releases page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`Releases page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -520,7 +523,7 @@ exports[`Releases page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/resources.test.tsx.snap b/test/pages/__snapshots__/resources.test.tsx.snap
index 9475c508..ac5ea37b 100644
--- a/test/pages/__snapshots__/resources.test.tsx.snap
+++ b/test/pages/__snapshots__/resources.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`About page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`About page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`About page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`About page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`About page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/security.test.tsx.snap b/test/pages/__snapshots__/security.test.tsx.snap
index 2be6b96f..684771c5 100644
--- a/test/pages/__snapshots__/security.test.tsx.snap
+++ b/test/pages/__snapshots__/security.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Security page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Security page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`Security page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`Security page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`Security page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/trademark.test.tsx.snap b/test/pages/__snapshots__/trademark.test.tsx.snap
index ab11571a..5d0f1762 100644
--- a/test/pages/__snapshots__/trademark.test.tsx.snap
+++ b/test/pages/__snapshots__/trademark.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Trademark page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Trademark page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`Trademark page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`Trademark page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`Trademark page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/__snapshots__/working-groups.test.tsx.snap b/test/pages/__snapshots__/working-groups.test.tsx.snap
index f5977cd9..5df38ba9 100644
--- a/test/pages/__snapshots__/working-groups.test.tsx.snap
+++ b/test/pages/__snapshots__/working-groups.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Working Groups page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Working Groups page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`Working Groups page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`Working Groups page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`Working Groups page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/download/__snapshots__/index.test.tsx.snap b/test/pages/download/__snapshots__/index.test.tsx.snap
index c8287faf..ac9856db 100644
--- a/test/pages/download/__snapshots__/index.test.tsx.snap
+++ b/test/pages/download/__snapshots__/index.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Download page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Download page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -761,7 +779,7 @@ exports[`Download page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
@@ -913,12 +931,11 @@ exports[`Download page should handle LTS to Current switch 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -967,6 +984,25 @@ exports[`Download page should handle LTS to Current switch 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -1488,7 +1524,7 @@ exports[`Download page should handle LTS to Current switch 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/pages/download/__snapshots__/package-manager.test.tsx.snap b/test/pages/download/__snapshots__/package-manager.test.tsx.snap
index 48a5fe97..d06b6908 100644
--- a/test/pages/download/__snapshots__/package-manager.test.tsx.snap
+++ b/test/pages/download/__snapshots__/package-manager.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Package Manager Page renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Package Manager Page renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -166,6 +184,18 @@ exports[`Package Manager Page renders correctly 1`] = `
         <ul
           class="community-nav__list"
         >
+          <li
+            class="t-body2 side-nav__item--title"
+          >
+            <b>
+              Community Pages
+            </b>
+            <i
+              class="material-icons"
+            >
+              arrow_drop_down
+            </i>
+          </li>
           <a
             class="t-body2 side-nav__item-community"
             href="/about"
@@ -246,33 +276,6 @@ exports[`Package Manager Page renders correctly 1`] = `
         >
           Mock Title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -419,7 +422,7 @@ exports[`Package Manager Page renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/templates/__snapshots__/blog.test.tsx.snap b/test/templates/__snapshots__/blog.test.tsx.snap
index 7f8261fe..277414db 100644
--- a/test/templates/__snapshots__/blog.test.tsx.snap
+++ b/test/templates/__snapshots__/blog.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`LearnLayout Template renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`LearnLayout Template renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -299,7 +317,7 @@ exports[`LearnLayout Template renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/templates/__snapshots__/learn.test.tsx.snap b/test/templates/__snapshots__/learn.test.tsx.snap
index 6fa591b9..db971e2e 100644
--- a/test/templates/__snapshots__/learn.test.tsx.snap
+++ b/test/templates/__snapshots__/learn.test.tsx.snap
@@ -93,12 +93,11 @@ exports[`Learn Template renders correctly 1`] = `
               </span>
               <div
                 class="searchBarContainer"
-                style="min-height: 3em; width: 100%; max-width: 7em; box-shadow: none;"
+                style="min-height: 0em; width: 100%; max-width: 7em; box-shadow: none;"
               >
                 <div
                   class="searchInputContainer"
-                  role="button"
-                  tabindex="0"
+                  role="presentation"
                 >
                   <i
                     class="material-icons searchIcon"
@@ -147,6 +146,25 @@ exports[`Learn Template renders correctly 1`] = `
                 </i>
               </button>
             </li>
+            <li
+              class="nav__tabs"
+            >
+              <a
+                href="https://github.com/nodejs/nodejs.dev"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <span
+                  class="sr-only"
+                >
+                  GitHub
+                </span>
+                <svg
+                  fill="var(--color-text-accent)"
+                  style="padding: 1rem; width: 2rem; height: 2rem;"
+                />
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -173,33 +191,6 @@ exports[`Learn Template renders correctly 1`] = `
         >
           test-title
         </h1>
-        <details
-          class="toc"
-        >
-          <summary>
-            <h6>
-              TABLE OF CONTENTS
-            </h6>
-          </summary>
-          <ul
-            class="tableOfContents"
-          >
-            <li>
-              <a
-                href="#mock-title"
-              >
-                mock-title
-              </a>
-            </li>
-            <li>
-              <a
-                href="#mock-title-2"
-              >
-                mock-title-2
-              </a>
-            </li>
-          </ul>
-        </details>
         <div>
           <p>
             Node.js can be installed in different ways. This post highlights the most common and convenient ones.
@@ -383,7 +374,7 @@ exports[`Learn Template renders correctly 1`] = `
         <li>
           <a
             class="footer__link"
-            href="https://nodejs.org/en/blog/"
+            href="/blog"
           >
             Blog
           </a>
diff --git a/test/util/scrollTo.test.ts b/test/util/scrollTo.test.ts
deleted file mode 100644
index a662528c..00000000
--- a/test/util/scrollTo.test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { calcNavScrollParams } from '../../src/util/scrollTo';
-
-describe('Tests for calcNavScrollParams', () => {
-  const mockHTMLElement = document.createElement('nav');
-  const height = 100; // arbritrary
-  it('scrollWindow is set null for mobile devices', () => {
-    window.innerWidth = 720;
-    const { scrollWindow } = calcNavScrollParams(height, mockHTMLElement);
-    expect(scrollWindow).toBeValid();
-  });
-});