Add scrolling

components/OrganizedContent.module.css

@@ -107,17 +107,12 @@
   width: 1rem;
 }
 
-@media only screen and (max-width: calc(768rem / 16)) {
-  .organizedContent > .nav {
-    display: none;
-  }
-}
 
 .burger {
   position: absolute;
   top: 5%;
   left: 2rem;
-  display: flex;
+  display: none;
   flex-direction: column;
   justify-content: space-around;
   width: 2rem;
@@ -175,7 +170,7 @@
   flex-direction: column;
   justify-content: center;
   background: var(--light-blue-1);
-  width: 90%;
+  width: 80%;
   height: 100vh;
   text-align: left;
   padding: 2rem;
@@ -202,3 +197,13 @@
   transition: color 0.3s linear;
   
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .burger {
+    display: flex;
+  }
+  .organizedContent > .nav {
+    display: none;
+  }
+  
+}

components/OrganizedContent.tsx

@@ -3,7 +3,7 @@ import React, {
   ComponentType,
   useState,
   //useRef,
-  //useEffect,
+  useEffect,
 } from "react";
 import styles from "./OrganizedContent.module.css";
 
@@ -83,6 +83,12 @@ export const OrganizedContent = ({
     childProps: childProps,
   };
 
+  useEffect(() => {
+    open
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "visible");
+  }, [open]);
+
   return (
     <div className={styles.organizedContent}>
       <Nav {...childProps} />

pages/playground.mdx

@@ -71,17 +71,5 @@ display information about the execs: prez, VP, trez, AVP, and syscom overlord.
 
 <TeamMemberCardDemo />
 
-<<<<<<< Updated upstream
 ---
  -->
-=======
---- -->
-
-## `<OrganizedContent />`
-
-Codey is supposed to say something here...
-
-<OrganizedContentDemo />
-
----
->>>>>>> Stashed changes