Add bugfix

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;

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;