feat: add mobile navigation dropdown

src/app/components/Main.module.css

@@ -9,23 +9,6 @@
   scrollbar-color: transparent #0b3766;
 }
 
-.container::-webkit-scrollbar {
-  background-color: transparent;
-}
-
-.container::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  border-radius: 10px;
-}
-
-.container:hover::-webkit-scrollbar-thumb {
-  background-color: #0b3766;
-}
-
-.container:hover::-webkit-scrollbar {
-  background-color: #043160;
-}
-
 .divider {
   width: 100%;
   height: 1px;

src/app/components/NavBar.module.css

@@ -1,8 +1,8 @@
 .nav {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
-  padding: 1rem;
+  padding: 1rem 0;
   width: 100%;
   max-width: 1450px;
   margin: 0 auto;
@@ -11,6 +11,7 @@
 .navList {
   display: flex;
   list-style: none;
+  padding: 0 1rem 0 0;
 }
 
 .navItem {
@@ -58,3 +59,36 @@
 .chevron {
   margin-left: 0.5rem;
 }
+
+.sectionDropdown {
+  display: none;
+}
+
+@media screen and (max-width: 1000px) {
+  .sectionDropdown {
+    display: block;
+  }
+}
+
+.dropdownSelect {
+  color: #64adac;
+  background-color: #05254a;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  padding: 0 1rem;
+}
+
+.dropdownSelect:focus-visible {
+  outline: none;
+}
+
+.selectItem {
+  background-color: #05254a;
+  color: #64adac;
+  cursor: pointer;
+  font-weight: bold;
+  margin: 1rem;
+}

src/app/components/NavBar.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import Link from 'next/link.js';
-import { useState } from 'react';
-import { DocsStructure } from '../types/types.js';
+import { Fragment, useState } from 'react';
+import { Doc, DocsStructure } from '../types/types.js';
 import styles from './NavBar.module.css';
 
 function VersionsDropdown({
@@ -93,8 +93,59 @@ function VersionsDropdown({
   );
 }
 
-function SectionDropdown({ section }: { section: string }) {
-  return <></>;
+function SectionDropdownGroup({ doc }: { doc: Doc }) {
+  return (
+    <Fragment>
+      {doc.copy && doc.example && (
+        <option
+          className={styles.selectItem}
+          label={doc.title}
+        >
+          {doc.title}
+        </option>
+      )}
+      {doc.children && doc.children.length > 0 && (
+        <optgroup label={doc.title}>
+          {doc.children.map(child => (
+            <option
+              className={styles.selectItem}
+              label={child.title}
+              key={child.title}
+            >
+              {child.title}
+            </option>
+          ))}
+        </optgroup>
+      )}
+    </Fragment>
+  );
+}
+
+function SectionDropdown({
+  version,
+}: {
+  version: DocsStructure;
+}) {
+  const handleSelectChange = (e: any) => {
+    const selectedOption = e.target.value;
+    location.hash = selectedOption
+      .replaceAll(' ', '-')
+      .toLowerCase();
+  };
+
+  return (
+    <select
+      onChange={handleSelectChange}
+      title="navigation dropdown"
+      className={styles.dropdownSelect}
+    >
+      {version.docs.map(doc => {
+        return (
+          <SectionDropdownGroup doc={doc} key={doc.title} />
+        );
+      })}
+    </select>
+  );
 }
 
 export default function NavBar({
@@ -104,6 +155,11 @@ export default function NavBar({
 }) {
   return (
     <nav className={styles.nav}>
+      <ul className={styles.navList}>
+        <li className={styles.sectionDropdown}>
+          <SectionDropdown version={version} />
+        </li>
+      </ul>
       <ul className={styles.navList}>
         <li className={styles.navItem}>
           <VersionsDropdown version={version.version} />

src/app/components/SideBar.module.css

@@ -8,6 +8,12 @@
   scrollbar-color: transparent #0b3766;
 }
 
+@media screen and (max-width: 1000px) {
+  .container {
+    display: none;
+  }
+}
+
 .container::-webkit-scrollbar {
   background-color: transparent;
 }
@@ -21,6 +27,10 @@
   background-color: #0b3766;
 }
 
+.container::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
 .link {
   text-decoration: none;
 }
@@ -80,6 +90,12 @@
   justify-content: space-between;
   align-items: center;
   gap: 3rem;
+  flex: 1 1 auto;
+}
+
+.chevronContainer {
+  display: flex;
+  justify-content: center;
 }
 
 .chevron {

src/app/components/SideBar.tsx

@@ -24,7 +24,10 @@ function TreeNode({ doc }: { doc: Doc }) {
           >
             {doc.title}
           </a>
-          <div onClick={() => setIsExpanded(!isExpanded)}>
+          <div
+            className={styles.chevronContainer}
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
             {isExpanded ? (
               <svg
                 xmlns="http://www.w3.org/2000/svg"