components/Navbar.module.css

@@ -13,7 +13,7 @@
   justify-content: space-between;
   align-items: center;
 
-  width: stretch;
+  width: 100%;
   max-width: calc(1440rem / 16);
   height: auto;
   padding: calc(28rem / 16) calc(136rem / 16);
@@ -160,7 +160,6 @@
   }
 }
 
-/* Mobile navbar layout (tablet and phone) */
 @media screen and (max-width: calc(768rem / 16)) {
   .navContent {
     display: grid;
@@ -170,7 +169,7 @@
     justify-items: end;
     align-items: center;
 
-    padding: calc(20rem / 16) calc(42rem / 16);
+    padding: calc(20rem / 16);
   }
 
   .logo {
@@ -219,8 +218,8 @@
 
     position: fixed;
 
-    width: stretch;
-    height: stretch;
+    width: 100%;
+    height: 100%;
     top: 0;
     left: 0;
 
@@ -234,13 +233,13 @@
 
     width: calc(288rem / 16);
     box-sizing: border-box;
-    height: stretch;
+    height: 100%;
     top: 0;
     right: 0;
     overflow: auto;
 
-    padding: calc(calc(64rem / 16) - 1rem) calc(calc(64rem / 16) - 1rem)
-      calc(calc(64rem / 16) - 1rem) calc(calc(78rem / 16) - 1rem);
+    padding: calc(calc(64rem / 16) - 1rem);
+    padding-left: calc(calc(78rem / 16) - 1rem);
 
     background-color: var(--off-white);
   }
@@ -252,7 +251,7 @@
 
     width: auto;
 
-    font-size: 18px;
+    font-size: calc(18rem / 16);
     font-weight: 500;
     text-align: left;
   }
@@ -268,7 +267,7 @@
     justify-items: start;
     align-items: center;
 
-    width: stretch;
+    width: 100%;
   }
 
   .navMenu > .itemWrapper > a {
@@ -313,7 +312,7 @@
     background: none;
     box-shadow: none;
 
-    font-size: calc(16rem / 16);
+    font-size: 1rem;
   }
 
   .dropdown > .itemWrapper {
@@ -357,10 +356,3 @@
     transform: rotate(180deg);
   }
 }
-
-/* Mobile navbar layout (phone only) */
-@media screen and (max-width: calc(375rem / 16)) {
-  .navContent {
-    padding: calc(24rem / 16) calc(20rem / 16);
-  }
-}

components/Navbar.tsx

@@ -72,15 +72,6 @@ const menu: Menu = [
   },
 ];
 
-function getMainRoute(route: string) {
-  if (route === "/") {
-    return "/";
-  } else if (route.startsWith("http://") || route.startsWith("https://")) {
-    return route;
-  }
-  return "/" + route.split("/")[1];
-}
-
 export function Navbar() {
   const router = useRouter();
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -127,8 +118,11 @@ export function Navbar() {
                       name={item.name}
                       route={item.route}
                       submenu={item.submenu}
-                      activeSubmenus={state.activeSubmenus}
-                      dispatch={dispatch}
+                      mainRouteActive={state.activeSubmenus.has(
+                        getMainRoute(item.route)
+                      )}
+                      onClose={() => dispatch({ type: "close" })}
+                      onToggle={(route) => dispatch({ type: "toggle", route })}
                     />
                   </li>
                 );
@@ -187,8 +181,9 @@ interface NavItemProps {
     name: string;
     route: string;
   }[];
-  activeSubmenus: Set<string>;
-  dispatch: React.Dispatch<MobileAction>;
+  mainRouteActive: boolean;
+  onToggle(route: string): void;
+  onClose(): void;
 }
 
 function NavItem(props: NavItemProps) {
@@ -204,7 +199,7 @@ function NavItem(props: NavItemProps) {
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
     }
-    props.dispatch({ type: "close" });
+    props.onClose();
   }
 
   return (
@@ -233,19 +228,17 @@ function NavItem(props: NavItemProps) {
         <>
           <button
             className={
-              props.activeSubmenus.has(getMainRoute(props.route))
+              props.mainRouteActive
                 ? `${styles.dropdownIcon} ${styles.rotate}`
                 : styles.dropdownIcon
             }
-            onClick={() =>
-              props.dispatch({ type: "toggle", route: props.route })
-            }
+            onClick={() => props.onToggle(props.route)}
           >
             <Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
           </button>
           <ul
             className={
-              props.activeSubmenus.has(getMainRoute(props.route))
+              props.mainRouteActive
                 ? `${styles.dropdown} ${styles.show}`
                 : styles.dropdown
             }
@@ -256,8 +249,9 @@ function NavItem(props: NavItemProps) {
                   <NavItem
                     name={item.name}
                     route={item.route}
-                    activeSubmenus={props.activeSubmenus}
-                    dispatch={props.dispatch}
+                    mainRouteActive={props.mainRouteActive}
+                    onClose={() => props.onClose()}
+                    onToggle={(route) => props.onToggle(route)}
                   />
                 </li>
               );
@@ -268,3 +262,12 @@ function NavItem(props: NavItemProps) {
     </>
   );
 }
+
+function getMainRoute(route: string) {
+  if (route === "/") {
+    return "/";
+  } else if (route.startsWith("http://") || route.startsWith("https://")) {
+    return route;
+  }
+  return "/" + route.split("/")[1];
+}