feat: add mobile navigation dropdown

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} />