Independently scrolled sidebar

src/components/Footer.js

@@ -14,42 +14,32 @@ const Footer = ({ className }) => {
 
   return (
     <footer className={cx(styles.footer, className)}>
-      <div className={cx('site-container', styles.container)}>
-        <div className={styles.left}>
-          <Link to="/">
-            <Logo
-              className={styles.logo}
-              textColor="#7DA5A8"
-              bracketColor="#7DA5A8"
-            />
-          </Link>
-          <div className={styles.copyright}>
-            Copyright &copy; 2020 New Relic Inc.
-          </div>
+      <div className={styles.left}>
+        <Link to="/">
+          <Logo
+            className={styles.logo}
+            textColor="currentColor"
+            bracketColor="currentColor"
+          />
+        </Link>
+        <div className={styles.copyright}>
+          Copyright &copy; 2020 New Relic Inc.
         </div>
+      </div>
 
-        <div className={styles.right}>
-          {fileRelativePath && (
-            <ExternalLink
-              href={`${githubBaseUrl}/blob/master/${fileRelativePath}`}
-            >
-              <FeatherIcon
-                className={styles.linkIcon}
-                name="edit"
-                size="1rem"
-              />
-              Edit this page
-            </ExternalLink>
-          )}
-          <ExternalLink href={`${githubBaseUrl}/issues/new/choose`}>
-            <FeatherIcon
-              className={styles.linkIcon}
-              name="github"
-              size="1rem"
-            />
-            Create an issue
+      <div className={styles.right}>
+        {fileRelativePath && (
+          <ExternalLink
+            href={`${githubBaseUrl}/blob/master/${fileRelativePath}`}
+          >
+            <FeatherIcon className={styles.linkIcon} name="edit" size="1rem" />
+            Edit this page
           </ExternalLink>
-        </div>
+        )}
+        <ExternalLink href={`${githubBaseUrl}/issues/new/choose`}>
+          <FeatherIcon className={styles.linkIcon} name="github" size="1rem" />
+          Create an issue
+        </ExternalLink>
       </div>
     </footer>
   );

src/components/Footer.module.scss

@@ -1,21 +1,16 @@
 .footer {
-  background-color: var(--color-neutrals-800);
-  color: var(--color-teal-300);
-  padding: 1.5rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--color-neutrals-600);
   font-size: 0.75rem;
   z-index: 1;
 
-  :global(.site-container) {
-    padding: 0 2rem;
+  a {
+    color: currentColor;
   }
 }
 
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .left {
   display: flex;
   align-items: center;
@@ -30,9 +25,9 @@
 }
 
 .copyright {
-  margin-left: 1rem;
-  padding-left: 1rem;
-  border-left: 1px dotted var(--color-neutrals-700);
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 1px dotted var(--color-neutrals-400);
 
   @media (max-width: 760px) {
     border-left: none;
@@ -45,7 +40,6 @@
   display: flex;
 
   a {
-    color: var(--color-teal-300);
     padding-right: 0;
     display: flex;
     align-items: center;

src/components/Layout.js

@@ -22,20 +22,17 @@ const Layout = ({ children }) => {
         toggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
       />
       <div className={cx(styles.main, 'site-container')}>
-        <Sidebar className={styles.hideOnMobile} />
-        <main
-          className={cx(styles.content, {
+        <Sidebar className={cx(styles.sidebar, styles.hideOnMobile)} />
+        <div />
+        <div
+          className={cx(styles.contentContainer, {
             [styles.hideOnMobile]: isMobileNavOpen,
           })}
         >
-          {children}
-        </main>
+          <main className={styles.content}>{children}</main>
+          <Footer className={styles.footer} />
+        </div>
       </div>
-      <Footer
-        className={cx({
-          [styles.hideOnMobile]: isMobileNavOpen,
-        })}
-      />
     </div>
   );
 };

src/components/Layout.module.scss

@@ -1,7 +1,9 @@
 .layout {
+  --global-header-height: 30px;
+
   min-height: 100vh;
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr;
 }
 
 .main {
@@ -14,10 +16,31 @@
   }
 }
 
-.content {
+.contentContainer {
+  display: flex;
+  flex-direction: column;
   padding: 2rem;
 }
 
+.sidebar {
+  position: fixed;
+  top: var(--global-header-height);
+  bottom: 0;
+  width: 300px;
+  height: calc(100vh - var(--global-header-height));
+  overflow: auto;
+}
+
+.content {
+  flex: 1;
+}
+
+.footer {
+  border-top: 1px solid var(--color-neutrals-100);
+  padding-top: 2rem;
+  margin-top: 4rem;
+}
+
 .hideOnDesktop {
   @media (min-width: 760px + 1) {
     display: none;

src/pages/404.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import { Link } from 'gatsby';
 import SEO from '../components/Seo';
 import SkewedContainer from '../components/SkewedContainer';
@@ -22,7 +23,9 @@ const NotFoundPage = ({ pageContext }) => (
           </p>
         </SkewedContainer>
       </div>
-      <Footer />
+      <div className={styles.footerContainer}>
+        <Footer className={cx(styles.footer, 'site-container')} />
+      </div>
     </div>
   </PageContext.Provider>
 );

src/pages/404.module.scss

@@ -22,3 +22,13 @@
   font-size: 1.125rem;
   padding: 8rem 0;
 }
+
+.footerContainer {
+  background: var(--color-neutrals-800);
+  padding: 1.5rem;
+}
+
+.footer {
+  color: var(--color-teal-300);
+  padding: 0 2rem;
+}