From 13e8d2d30006cd637f5f053287baa7eb868b0034 Mon Sep 17 00:00:00 2001
From: William Tran <william.tran1@uwaterloo.ca>
Date: Thu, 26 Aug 2021 18:54:44 -0400
Subject: [PATCH] Add scrolling and space

---
 components/OrganizedContent.module.css | 12 +++++++-----
 components/OrganizedContent.tsx        | 21 ++++++++-------------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css
index c2553254..20a26da0 100644
--- a/components/OrganizedContent.module.css
+++ b/components/OrganizedContent.module.css
@@ -180,6 +180,13 @@
 
   .nav {
     margin: 0;
+    overflow-y: auto;
+    background: var(--light-blue-1);
+    width: 90%;
+  }
+
+  .nav > :last-child {
+    margin-bottom: calc(96rem / 16);
   }
 
   .navWrapper {
@@ -193,11 +200,6 @@
     transition: transform 0.3s ease-in-out;
     transform: translateX(-100%);
   }
-
-  .mobileNav {
-    background: var(--light-blue-1);
-    width: 90%;
-  }
   
   .mobileNavOpen {
     transform: translateX(0);
diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index c6dc6900..5ce60f21 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -71,18 +71,13 @@ export function OrganizedContent({
         className={navWrapperStyles.join(" ")}
         onClick={() => setMobileNavOpen(false)}
       >
-        <div
-          className={styles.mobileNav}
-          onClick={(event) => event.stopPropagation()}
-        >
-          <Nav
-            sections={sections}
-            currentIndex={currentIndex}
-            link={Link}
-            pageTitle={pageTitle}
-            setMobileNavOpen={setMobileNavOpen}
-          />
-        </div>
+        <Nav
+          sections={sections}
+          currentIndex={currentIndex}
+          link={Link}
+          pageTitle={pageTitle}
+          setMobileNavOpen={setMobileNavOpen}
+        />
       </div>
       <div className={styles.content}>
         {isReadAll ? (
@@ -164,7 +159,7 @@ function Nav({
   setMobileNavOpen,
 }: NavProps) {
   return (
-    <nav className={styles.nav}>
+    <nav className={styles.nav} onClick={(event) => event.stopPropagation()}>
       <h1 className={styles.mobileNavTitle}>{pageTitle}</h1>
       {sections.map((section, index) => {
         const classNames = [styles.navItem];