components/Navbar.module.css

@@ -214,22 +214,23 @@
   }
 
   .navMobileBackground {
-    display: none;
-
     position: fixed;
+    visibility: hidden;
 
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
+    z-index: 20;
 
     background-color: var(--navbar-gray);
+    opacity: 0;
 
-    z-index: 20;
+    transition: 0.5s;
   }
 
   .navMenuWrapper {
-    position: absolute;
+    position: fixed;
 
     width: calc(288rem / 16);
     box-sizing: border-box;
@@ -237,11 +238,15 @@
     top: 0;
     right: 0;
     overflow: auto;
+    z-index: 30;
 
     padding: calc(calc(64rem / 16) - 1rem);
     padding-left: calc(calc(78rem / 16) - 1rem);
 
     background-color: var(--off-white);
+
+    transform: translateX(100vw);
+    transition: 0.5s;
   }
 
   .navMenu {
@@ -352,6 +357,15 @@
     display: block;
   }
 
+  .show.navMobileBackground {
+    visibility: visible;
+    opacity: 100%;
+  }
+
+  .show.navMobileBackground + .navMenuWrapper {
+    transform: translateX(0);
+  }
+
   .rotate {
     transform: rotate(180deg);
   }

components/Navbar.tsx

@@ -97,38 +97,34 @@ export function Navbar() {
               : styles.navMobileBackground
           }
           onClick={() => dispatch({ type: "close" })}
-        >
-          <div
-            className={styles.navMenuWrapper}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Link href="/">
-              <a
-                className={styles.logoMobile}
-                onClick={() => dispatch({ type: "close" })}
-              >
-                <Image src="/images/logo-icon.svg" alt="CSC Logo" />
-              </a>
-            </Link>
-            <ul className={styles.navMenu}>
-              {menu.map((item) => {
-                return (
-                  <li className={styles.itemWrapper} key={item.name}>
-                    <NavItem
-                      name={item.name}
-                      route={item.route}
-                      submenu={item.submenu}
-                      mainRouteActive={state.activeSubmenus.has(
-                        getMainRoute(item.route)
-                      )}
-                      onClose={() => dispatch({ type: "close" })}
-                      onToggle={(route) => dispatch({ type: "toggle", route })}
-                    />
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
+        />
+        <div className={styles.navMenuWrapper}>
+          <Link href="/">
+            <a
+              className={styles.logoMobile}
+              onClick={() => dispatch({ type: "close" })}
+            >
+              <Image src="/images/logo-icon.svg" alt="CSC Logo" />
+            </a>
+          </Link>
+          <ul className={styles.navMenu}>
+            {menu.map((item) => {
+              return (
+                <li className={styles.itemWrapper} key={item.name}>
+                  <NavItem
+                    name={item.name}
+                    route={item.route}
+                    submenu={item.submenu}
+                    mainRouteActive={state.activeSubmenus.has(
+                      getMainRoute(item.route)
+                    )}
+                    onClose={() => dispatch({ type: "close" })}
+                    onToggle={(route) => dispatch({ type: "toggle", route })}
+                  />
+                </li>
+              );
+            })}
+          </ul>
         </div>
       </div>
     </nav>