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);

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];