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;
 }
 
@@ -91,4 +95,58 @@
   cursor: pointer;
   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,38 +153,61 @@ 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>
-        <li className={styles.navItem}>
+        <div
-          <VersionsDropdown version={version.version} />
+          onClick={handleNavToggle}
-        </li>
+          className={styles.navbarToggle}
-        <li className={styles.navItem}>
+        >
-          {version.hasSwagger ? (
+          <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>
+          <li className={styles.navItem}>
+            {version.hasSwagger ? (
+              <Link
+                href="https://api.onspring.com/swagger"
+                className={styles.navLink}
+                target="_blank"
+              >
+                Swagger
+              </Link>
+            ) : null}
+          </li>
+          <li className={styles.navItem}>
             <Link
-              href="https://api.onspring.com/swagger"
+              href="https://onspring.com/customer-service/admin-support/"
               className={styles.navLink}
               target="_blank"
             >
-              Swagger
+              Support
             </Link>
-          ) : null}
+          </li>
-        </li>
+        </ul>
-        <li className={styles.navItem}>
+      </div>
-          <Link
-            href="https://onspring.com/customer-service/admin-support/"
-            className={styles.navLink}
-            target="_blank"
-          >
-            Support
-          </Link>
-        </li>
-      </ul>
     </nav>
   );
 }