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>; -} - -interface MenuProps { - open: boolean; - setOpen: React.Dispatch>; 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 = ({ )} -
- - -
+ ); }; @@ -245,18 +232,19 @@ const Burger = ({ open, setOpen }: MobileProps) => { ); }; -function MenuWrapper(menuProps: MenuProps) { +function MobileWrapper(mobileProps: MobileProps) { const wrapperRef = useRef(null); - useOutsideAlerter(wrapperRef, menuProps.setOpen); + useOutsideAlerter(wrapperRef, mobileProps.setOpen); return (
- + +
); } -const Menu = ({ open, childProps }: MenuProps) => { +const Menu = ({ open, childProps }: MobileProps) => { const mobileNav = open ? styles.mobileNav : styles.mobileNav + " " + styles.mobileNavClosed;