components/OrganizedContent.module.css

@@ -179,26 +179,35 @@
   }
 
   .nav {
-    margin: 0;
-    overflow-y: auto;
-    background: var(--primary-accent-lighter);
-    width: 90%;
-  }
-
-  .nav > :last-child {
-    margin-bottom: calc(96rem / 16);
-  }
-
-  .navWrapper {
     position: fixed;
-    display: flex;
+
+    top: 0;
+    left: 0;
+    overflow-y: auto;
+    z-index: 30;
+
+    margin: 0;
+    background: var(--primary-accent-lighter);
+    width: calc(288rem / 16);
+
+    transform: translateX(-100vw);
+    transition: 0.5s;
+  }
+
+  .navMobileBackground {
+    position: fixed;
+    visibility: hidden;
+
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
-    z-index: 10;
-    transition: transform 0.3s ease-in-out;
-    transform: translateX(-100%);
+    z-index: 20;
+
+    background-color: var(--navbar-page-overlay);
+    opacity: 0;
+
+    transition: 0.5s;
   }
   
   .mobileNavOpen {
@@ -212,5 +221,10 @@
     margin: calc(14rem / 16);
     margin-top: calc(39rem / 16);
   }
+
+  .show.navMobileBackground {
+    visibility: visible;
+    opacity: 100%;
+  }
 }
 

components/OrganizedContent.tsx

@@ -49,9 +49,6 @@ export function OrganizedContent({
   const ref = useRef<HTMLDivElement>(null);
   const isVisible = useOnScreen(ref.current);
   const burgerVisible = useBurger(isVisible);
-  const navWrapperStyles = mobileNavOpen
-    ? [styles.navWrapper, styles.mobileNavOpen]
-    : [styles.navWrapper];
 
   useEffect(() => {
     mobileNavOpen
@@ -62,17 +59,21 @@ export function OrganizedContent({
   return (
     <div className={styles.wrapper} ref={ref}>
       <div
-        className={navWrapperStyles.join(" ")}
+        className={
+          mobileNavOpen
+            ? `${styles.navMobileBackground} ${styles.show}`
+            : styles.navMobileBackground
+        }
         onClick={() => setMobileNavOpen(false)}
-      >
-        <Nav
-          sections={sections}
-          currentIndex={currentIndex}
-          link={Link}
-          pageTitle={pageTitle}
-          setMobileNavOpen={setMobileNavOpen}
-        />
-      </div>
+      />
+      <Nav
+        sections={sections}
+        currentIndex={currentIndex}
+        link={Link}
+        pageTitle={pageTitle}
+        mobileNavOpen={mobileNavOpen}
+        setMobileNavOpen={setMobileNavOpen}
+      />
       <div className={styles.content}>
         {isReadAll ? (
           children
@@ -108,6 +109,7 @@ interface NavProps {
   currentIndex: number;
   link: Link;
   pageTitle: string;
+  mobileNavOpen: boolean;
   setMobileNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
@@ -116,10 +118,18 @@ function Nav({
   currentIndex,
   link: Link,
   pageTitle,
+  mobileNavOpen,
   setMobileNavOpen,
 }: NavProps) {
+  const navStyles = mobileNavOpen
+    ? [styles.nav, styles.mobileNavOpen]
+    : [styles.nav];
+
   return (
-    <nav className={styles.nav} onClick={(event) => event.stopPropagation()}>
+    <nav
+      className={navStyles.join(" ")}
+      onClick={(event) => event.stopPropagation()}
+    >
       <h1 className={styles.mobileNavTitle}>{pageTitle}</h1>
       {sections.map((section, index) => {
         const classNames = [styles.navItem];