Add rudmentary mobile

components/OrganizedContent.module.css

@@ -108,7 +108,97 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
-  .nav {
+  .organizedContent > .nav {
     display: none;
   }
 }
+
+.burger {
+  position: absolute;
+  top: 5%;
+  left: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 2rem;
+  height: 2rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 10;
+  background: var(--light-blue-2);
+}
+
+.burger:focus {
+  outline: none;
+}
+
+.burger > div {
+  width: 2rem;
+  height: 0.25rem;
+  background: var(--blue-2);
+  border-radius: 10px;
+  transition: all 0.2s linear;
+  position: relative;
+  transform-origin: 1px;
+}
+
+.burgerLineOpen1 {
+  transform: rotate(45deg);
+}
+
+.burgerLineClosed1 {
+  transform: rotate(0);
+}
+
+.burgerLineOpen2 {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.burgerLineClosed2 {
+  transform: translateX(0px);
+  opacity: 1;
+}
+
+.burgerLineOpen3 {
+  transform: rotate(-45deg);
+}
+
+.burgerLineClosed3 {
+  transform: rotate(0);
+}
+
+.mobileNav {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--light-blue-1);
+  width: 90%;
+  height: 100vh;
+  text-align: left;
+  padding: 2rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(0);
+}
+
+.mobileNavClosed {
+  transform: translateX(-100%);
+}
+
+
+.mobileNav > a {
+  font-size: 2rem;
+  text-transform: uppercase;
+  padding: 2rem 0;
+  font-weight: bold;
+  letter-spacing: 0.5rem;
+  color: var(--blue-2);
+  text-decoration: none;
+  transition: color 0.3s linear;
+  
+}

components/OrganizedContent.tsx

@@ -1,4 +1,10 @@
-import React, { ReactNode, ComponentType } from "react";
+import React, {
+  ReactNode,
+  ComponentType,
+  useState,
+  //useRef,
+  //useEffect,
+} from "react";
 import styles from "./OrganizedContent.module.css";
 
 export interface LinkProps {
@@ -28,12 +34,27 @@ interface ChildProps {
   link: Link;
 }
 
+interface MobileProps {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+interface MenuProps {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  childProps: ChildProps;
+}
+
 export const OrganizedContent = ({
   headings,
   currentIndex,
   link: Link,
   children,
 }: Props) => {
+  const [open, setOpen] = useState(false);
+  //const node = useRef();
+  //useOnClickOutside(node, () => setOpen(false));
+
   const isReadAll = headings[currentIndex].title === "Read All";
 
   const readAllContent = headings
@@ -51,6 +72,17 @@ export const OrganizedContent = ({
     link: Link,
   };
 
+  const mobileProps: MobileProps = {
+    open: open,
+    setOpen: setOpen,
+  };
+
+  const menuProps: MenuProps = {
+    open: open,
+    setOpen: setOpen,
+    childProps: childProps,
+  };
+
   return (
     <div className={styles.organizedContent}>
       <Nav {...childProps} />
@@ -65,6 +97,10 @@ export const OrganizedContent = ({
           </>
         )}
       </div>
+      <div>
+        <Burger {...mobileProps} />
+        <Menu {...menuProps} />
+      </div>
     </div>
   );
 };
@@ -162,3 +198,27 @@ const Footer = ({ headings, currentIndex, link: Link }: ChildProps) => {
     </div>
   );
 };
+
+const Burger = ({ open, setOpen }: MobileProps) => {
+  const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
+  const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
+  const line3 = open ? styles.burgerLineOpen3 : styles.burgerLineClosed3;
+  return (
+    <div className={styles.burger} onClick={() => setOpen(!open)}>
+      <div className={line1} />
+      <div className={line2} />
+      <div className={line3} />
+    </div>
+  );
+};
+
+const Menu = ({ open, childProps }: MenuProps) => {
+  const mobileNav = open
+    ? styles.mobileNav
+    : styles.mobileNav + " " + styles.mobileNavClosed;
+  return (
+    <div className={mobileNav}>
+      <Nav {...childProps} />
+    </div>
+  );
+};

pages/_app.css

@@ -12,6 +12,8 @@ body {
   --blue-1-05: #5caff90d;
   --blue-1-20: #5caff934;
   --blue-2: #1482e3;
+  --light-blue-1: #E1EEFA;
+  --light-blue-2: #C0E1FE;
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --gradient-blue-green: linear-gradient(
@@ -31,6 +33,8 @@ body {
   --blue-1-05: #5caff90d;
   --blue-1-20: #5caff934;
   --blue-2: #1482e3;
+  --light-blue-1: #E1EEFA;
+  --light-blue-2: #C0E1FE;
   --purple-1: #525284;
   --purple-2: #2a2a62;
   --gradient-blue-green: linear-gradient(

pages/_app.tsx

@@ -10,7 +10,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <ThemeProvider theme="light">
       <MDXProvider components={{}}>
-        <Navbar />
+        {/* <Navbar /> */}
         <Component {...pageProps} />
       </MDXProvider>
     </ThemeProvider>

pages/playground.mdx

@@ -71,5 +71,17 @@ 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