From 65a178417fc683a107b1cc8167353be27b6d03c9 Mon Sep 17 00:00:00 2001
From: William Tran <william.tran1@uwaterloo.ca>
Date: Mon, 28 Jun 2021 17:01:41 -0400
Subject: [PATCH] Add bugfix

---
 components/OrganizedContent.module.css |  2 +-
 components/OrganizedContent.tsx        | 24 ++++++------------------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css
index a1fafd18..e2fc3665 100644
--- a/components/OrganizedContent.module.css
+++ b/components/OrganizedContent.module.css
@@ -170,6 +170,7 @@
 }
 
 .mobileNav {
+  position: fixed;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -178,7 +179,6 @@
   height: 100vh;
   text-align: left;
   padding: 2rem;
-  position: absolute;
   top: 0;
   left: 0;
   transition: transform 0.3s ease-in-out;
diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index 56699795..6c2ddc50 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -37,11 +37,6 @@ interface ChildProps {
 interface MobileProps {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-interface MenuProps {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   childProps: ChildProps;
 }
 
@@ -75,11 +70,6 @@ export const OrganizedContent = ({
   const mobileProps: MobileProps = {
     open: open,
     setOpen: setOpen,
-  };
-
-  const menuProps: MenuProps = {
-    open: open,
-    setOpen: setOpen,
     childProps: childProps,
   };
 
@@ -103,10 +93,7 @@ export const OrganizedContent = ({
           </>
         )}
       </div>
-      <div>
-        <Burger {...mobileProps} />
-        <MenuWrapper {...menuProps} />
-      </div>
+      <MobileWrapper {...mobileProps} />
     </div>
   );
 };
@@ -245,18 +232,19 @@ const Burger = ({ open, setOpen }: MobileProps) => {
   );
 };
 
-function MenuWrapper(menuProps: MenuProps) {
+function MobileWrapper(mobileProps: MobileProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
-  useOutsideAlerter(wrapperRef, menuProps.setOpen);
+  useOutsideAlerter(wrapperRef, mobileProps.setOpen);
 
   return (
     <div ref={wrapperRef}>
-      <Menu {...menuProps} />
+      <Burger {...mobileProps} />
+      <Menu {...mobileProps} />
     </div>
   );
 }
 
-const Menu = ({ open, childProps }: MenuProps) => {
+const Menu = ({ open, childProps }: MobileProps) => {
   const mobileNav = open
     ? styles.mobileNav
     : styles.mobileNav + " " + styles.mobileNavClosed;