Add basic mobile navbar layout

components/Navbar.module.css

@@ -19,16 +19,22 @@
   padding: calc(28rem / 16) calc(136rem / 16);
 }
 
-.logo {
+.logo,
+.logoMobile {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.logo:hover {
+.logo:hover,
+.logoMobile:hover {
   cursor: pointer;
 }
 
+.logoMobile {
+  display: none;
+}
+
 .logo img {
   width: calc(96rem / 16);
 }
@@ -64,7 +70,7 @@
   color: var(--blue-2);
 }
 
-.navMenu > li:hover > a {
+.navMenu > li > a:hover {
   color: var(--blue-2);
   font-weight: 600;
 }
@@ -90,6 +96,10 @@
   align-items: center;
 }
 
+.dropdownIcon {
+  display: none;
+}
+
 .dropdown {
   visibility: visible;
 
@@ -172,8 +182,18 @@
     justify-self: center;
   }
 
-  .logo img {
+  .logoMobile {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    margin-bottom: calc(20rem / 16);
+  }
+
+  .logo img,
+  .logoMobile img {
     width: calc(80rem / 16);
+    padding: 1rem;
   }
 
   .hamburger {
@@ -195,7 +215,78 @@
     cursor: pointer;
   }
 
+  .navMobileBackground {
+    display: none;
+
+    position: fixed;
+
+    width: stretch;
+    height: stretch;
+    top: 0;
+    left: 0;
+
+    background: #79787846;
+
+    z-index: 20;
+  }
+
+  .hamburger:focus + .navMobileBackground {
+    display: block;
+  }
+
   .navMenuWrapper {
+    position: absolute;
+
+    width: calc(288rem / 16);
+    box-sizing: border-box;
+    height: stretch;
+    top: 0;
+    right: 0;
+
+    padding: calc(calc(64rem / 16) - 1rem) calc(calc(64rem / 16) - 1rem)
+      calc(calc(64rem / 16) - 1rem) calc(calc(78rem / 16) - 1rem);
+
+    background: var(--off-white);
+  }
+
+  .navMenu {
+    display: flex;
+    flex-direction: column;
+    gap: calc(4rem / 16);
+
+    width: auto;
+  }
+
+  .navMenu li {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: left;
+  }
+
+  .itemWrapper {
+    flex-direction: row;
+    justify-content: space-between;
+
+    width: stretch;
+  }
+
+  .dropdownIcon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 1rem;
+    box-sizing: content-box;
+
+    border: none;
+    background: none;
+  }
+
+  .dropdownIcon:hover {
+    cursor: pointer;
+  }
+
+  .dropdown {
     display: none;
   }
 }

components/Navbar.tsx

@@ -98,7 +98,7 @@ function NavItem(props: NavLink) {
             className={
               router.pathname === props.route ||
               ((props.submenu?.length ?? 0) > 0 &&
-                router.pathname.startsWith(props.route))
+                router.pathname.split("/")[1] === props.route.split("/")[1])
                 ? styles.currentPage
                 : ""
             }
@@ -113,15 +113,20 @@ function NavItem(props: NavLink) {
         </Link>
       )}
       {(props.submenu?.length ?? 0) > 0 ? (
-        <ul className={styles.dropdown}>
-          {props.submenu?.map((item) => {
-            return (
-              <li className={styles.itemWrapper} key={item.name}>
-                <NavItem name={item.name} route={item.route} />
-              </li>
-            );
-          })}
-        </ul>
+        <>
+          <button className={styles.dropdownIcon}>
+            <Image src="/images/triangle.svg" alt="Dropdown Icon" />
+          </button>
+          <ul className={styles.dropdown}>
+            {props.submenu?.map((item) => {
+              return (
+                <li className={styles.itemWrapper} key={item.name}>
+                  <NavItem name={item.name} route={item.route} />
+                </li>
+              );
+            })}
+          </ul>
+        </>
       ) : null}
     </>
   );
@@ -139,20 +144,27 @@ export function Navbar() {
         <button className={styles.hamburger}>
           <Image src="/images/hamburger.svg" alt="Menu" />
         </button>
-        <div className={styles.navMenuWrapper}>
-          <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}
-                  />
-                </li>
-              );
-            })}
-          </ul>
+        <div className={styles.navMobileBackground}>
+          <div className={styles.navMenuWrapper}>
+            <Link href="/">
+              <a className={styles.logoMobile}>
+                <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}
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
         </div>
       </div>
     </nav>

public/images/triangle.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.24407 0.872871C6.64284 0.412409 7.35716 0.41241 7.75593 0.872872L13.3613 7.34535C13.9221 7.99299 13.4621 9 12.6053 9H1.39467C0.537918 9 0.0778675 7.99299 0.638743 7.34535L6.24407 0.872871Z" fill="#2A2A62"/>
+</svg>