feat: implement toggler for right side nav

src/app/components/NavBar.module.css

@@ -8,9 +8,13 @@
   margin: 0 auto;
 }
 
-.navList {
+.navListRight,
+.navListLeft {
   display: flex;
   list-style: none;
+}
+
+.navListRight {
   padding: 0 1rem 0 0;
 }
 
@@ -92,3 +96,57 @@
   font-weight: bold;
   margin: 1rem;
 }
+
+.navbarToggle {
+  cursor: pointer;
+  display: none;
+}
+
+.navbarToggleLine {
+  width: 2rem;
+  height: 0.25rem;
+  background-color: #64adac;
+  margin: 2px;
+  border-radius: 0.25rem;
+}
+
+@media screen and (max-width: 1000px) {
+  .nav {
+    align-items: flex-start;
+    box-shadow: 0 2px 5px 0 rgba(59, 65, 94, .1);
+  }
+
+  .navbarToggle {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding: 0 1rem 0 0;
+  }
+
+  .navListRight {
+    display: none;
+  }
+
+  .navListRightOpen {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dropdownMenuOpen {
+    position: static;
+    display: block;
+    padding: 0;
+    padding-left: 0.5rem;
+    z-index: 0;
+    box-shadow: none;
+    border-radius: 0;
+    background-color: transparent;
+    white-space: nowrap;
+    transform: none;
+  }
+
+  .dropdownMenuOpen::before {
+    content: none;
+  }
+}

src/app/components/NavBar.tsx

@@ -153,14 +153,36 @@ export default function NavBar({
 }: {
   version: DocsStructure;
 }) {
+  const [isNavOpen, setIsNavOpen] =
+    useState<boolean>(false);
+
+  const handleNavToggle = () => {
+    setIsNavOpen(!isNavOpen);
+  };
+
   return (
     <nav className={styles.nav}>
-      <ul className={styles.navList}>
+      <ul className={styles.navListLeft}>
         <li className={styles.sectionDropdown}>
           <SectionDropdown version={version} />
         </li>
       </ul>
-      <ul className={styles.navList}>
+      <div>
+        <div
+          onClick={handleNavToggle}
+          className={styles.navbarToggle}
+        >
+          <div className={styles.navbarToggleLine}></div>
+          <div className={styles.navbarToggleLine}></div>
+          <div className={styles.navbarToggleLine}></div>
+        </div>
+        <ul
+          className={
+            isNavOpen
+              ? `${styles.navListRight} ${styles.navListRightOpen}`
+              : styles.navListRight
+          }
+        >
           <li className={styles.navItem}>
             <VersionsDropdown version={version.version} />
           </li>
@@ -185,6 +207,7 @@ export default function NavBar({
             </Link>
           </li>
         </ul>
+      </div>
     </nav>
   );
 }