From 7d9a7feba61f4087c162e79f6daa9e72761cb916 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Fri, 19 Jun 2020 14:30:14 -0700
Subject: [PATCH] feat: Use a fixed sidebar and scroll independently

---
 src/components/Layout.js          | 3 ++-
 src/components/Layout.module.scss | 9 +++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Layout.js b/src/components/Layout.js
index 65afe4c44..22b2b4d0c 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -22,7 +22,8 @@ const Layout = ({ children }) => {
         toggle={() => setIsMobileNavOpen(!isMobileNavOpen)}
       />
       <div className={cx(styles.main, 'site-container')}>
-        <Sidebar className={cx(styles.hideOnMobile)} />
+        <Sidebar className={cx(styles.sidebar, styles.hideOnMobile)} />
+        <div />
         <div
           className={cx(styles.contentContainer, {
             [styles.hideOnMobile]: isMobileNavOpen,
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index d2f40af1b..3e60bc25f 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -20,6 +20,15 @@
   padding: 2rem;
 }
 
+.sidebar {
+  position: fixed;
+  top: 30px;
+  bottom: 0;
+  width: 300px;
+  height: calc(100vh - 30px);
+  overflow: auto;
+}
+
 .content {
   flex: 1;
 }