Add mobile navbar dropdown layout

components/Navbar.module.css

@@ -101,7 +101,7 @@
 }
 
 .dropdown {
-  visibility: visible;
+  visibility: hidden;
 
   display: flex;
   flex-direction: column;
@@ -121,37 +121,33 @@
   font-size: calc(14rem / 16);
 }
 
-.dropdown > li {
+.dropdown li {
   width: 100%;
 }
 
-.dropdown > li > a {
+.dropdown li a {
   padding: calc(8rem / 16);
   width: 100%;
   box-sizing: border-box;
 }
 
-.dropdown > li:hover > a,
-.dropdown > li > a:focus {
+.dropdown li:hover a,
+.dropdown li a:focus {
   background-color: var(--blue-1-20);
 }
 
-.dropdown > li:first-child > a {
+.dropdown li:first-child a {
   padding-top: 1rem;
   border-radius: calc(8rem / 16) calc(8rem / 16) 0 0;
 }
 
-.dropdown > li:last-child > a {
+.dropdown li:last-child a {
   padding-bottom: 1rem;
   border-radius: 0 0 calc(8rem / 16) calc(8rem / 16);
 }
 
-.navMenu > li .dropdown {
-  visibility: hidden;
-}
-
-.navMenu > li:hover .dropdown,
-.navMenu > li:focus-within .dropdown {
+.navMenu li:hover .dropdown,
+.navMenu li:focus-within .dropdown {
   visibility: visible;
 }
 
@@ -193,6 +189,9 @@
   .logo img,
   .logoMobile img {
     width: calc(80rem / 16);
+  }
+
+  .logoMobile img {
     padding: 1rem;
   }
 
@@ -225,15 +224,11 @@
     top: 0;
     left: 0;
 
-    background: #79787846;
+    background-color: var(--gray-0-70);
 
     z-index: 20;
   }
 
-  .hamburger:focus + .navMobileBackground {
-    display: block;
-  }
-
   .navMenuWrapper {
     position: absolute;
 
@@ -246,7 +241,7 @@
     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);
+    background-color: var(--off-white);
   }
 
   .navMenu {
@@ -255,22 +250,34 @@
     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;
+  .navMenu > .itemWrapper {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "link button"
+      "dropdown dropdown";
+    column-gap: 0;
+    row-gap: 0;
+    justify-items: start;
+    align-items: center;
 
     width: stretch;
   }
 
+  .navMenu > .itemWrapper > a {
+    grid-area: link;
+  }
+
   .dropdownIcon {
+    grid-area: button;
+    justify-self: end;
+
     display: flex;
     justify-content: center;
     align-items: center;
@@ -287,13 +294,72 @@
   }
 
   .dropdown {
+    grid-area: dropdown;
+
     display: none;
+    visibility: visible;
+
+    justify-content: space-between;
+    align-items: start;
+
+    position: static;
+
+    margin: 0;
+    margin-left: calc(18rem / 16);
+    margin-bottom: calc(16rem / 16);
+
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+
+    font-size: calc(16rem / 16);
+  }
+
+  .dropdown > .itemWrapper {
+    align-items: start;
+  }
+
+  .dropdown li {
+    width: auto;
+    text-align: left;
+  }
+
+  .dropdown li a {
+    width: auto;
+  }
+
+  .dropdown li:hover a,
+  .dropdown li a:focus {
+    background: none;
+  }
+
+  .dropdown li:hover a {
+    color: default;
+    font-weight: default;
+  }
+
+  .dropdown li:first-child a {
+    padding-top: calc(8rem / 16);
+    border-radius: 0;
+  }
+
+  .dropdown li:last-child a {
+    padding-bottom: calc(8rem / 16);
+    border-radius: 0;
+  }
+
+  .show {
+    display: block;
+  }
+
+  .rotate {
+    transform: rotate(180deg);
   }
 }
 
 /* Mobile navbar layout (phone only) */
 @media screen and (max-width: calc(375rem / 16)) {
   .navContent {
-    padding: calc(24rem / 16) calc(42rem / 16);
+    padding: calc(24rem / 16) calc(20rem / 16);
   }
 }

components/Navbar.tsx

@@ -114,10 +114,10 @@ function NavItem(props: NavLink) {
       )}
       {(props.submenu?.length ?? 0) > 0 ? (
         <>
-          <button className={styles.dropdownIcon}>
-            <Image src="/images/triangle.svg" alt="Dropdown Icon" />
+          <button className={`${styles.dropdownIcon} ${styles.rotate}`}>
+            <Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
           </button>
-          <ul className={styles.dropdown}>
+          <ul className={`${styles.dropdown} ${styles.show}`}>
             {props.submenu?.map((item) => {
               return (
                 <li className={styles.itemWrapper} key={item.name}>
@@ -144,7 +144,7 @@ export function Navbar() {
         <button className={styles.hamburger}>
           <Image src="/images/hamburger.svg" alt="Menu" />
         </button>
-        <div className={styles.navMobileBackground}>
+        <div className={`${styles.navMobileBackground} ${styles.show}`}>
           <div className={styles.navMenuWrapper}>
             <Link href="/">
               <a className={styles.logoMobile}>

pages/_app.css

@@ -20,6 +20,8 @@ body {
     #1481e3 -17.95%,
     #4ed4b2 172.82%
   );
+  /* used in mobile navbar background */
+  --gray-0-70: #79787846;
 }
 
 /* FIXME: Dark theme is the same as light theme right now */
@@ -39,6 +41,8 @@ body {
     #1481e3 -17.95%,
     #4ed4b2 172.82%
   );
+  /* used in mobile navbar background */
+  --gray-0-70: #79787846;
 }
 
 @media only screen and (max-width: calc(425rem / 16)) {