chore: refactor to move section dropdown to separate component

src/app/components/NavBar.module.css

@@ -77,28 +77,6 @@
   }
 }
 
-.dropdownSelect {
-  color: #64adac;
-  background-color: inherit;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 1rem;
-  font-weight: bold;
-  padding: 0 1rem;
-}
-
-.dropdownSelect:focus-visible {
-  outline: none;
-}
-
-.selectItem {
-  color: #64adac;
-  cursor: pointer;
-  font-weight: bold;
-  margin: 1rem;
-}
-
 .navbarToggle {
   cursor: pointer;
   display: none;

src/app/components/NavBar.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import Link from 'next/link';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { themes, useThemeContext } from '../theme';
-import { Doc, DocsStructure } from '../types/types';
+import { DocsStructure } from '../types/types';
 import styles from './NavBar.module.css';
+import SectionDropdown from './SectionDropdown';
 
 function VersionsDropdown({
   version,
@@ -94,61 +95,6 @@ function VersionsDropdown({
   );
 }
 
-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({
   version,
 }: {

src/app/components/SectionDropdown.module.css

@@ -0,0 +1,21 @@
+.dropdownSelect {
+  color: #64adac;
+  background-color: inherit;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: bold;
+  padding: 0 1rem;
+}
+
+.dropdownSelect:focus-visible {
+  outline: none;
+}
+
+.selectItem {
+  color: #64adac;
+  cursor: pointer;
+  font-weight: bold;
+  margin: 1rem;
+}

src/app/components/SectionDropdown.tsx

@@ -0,0 +1,58 @@
+import { Fragment } from 'react';
+import { Doc, DocsStructure } from '../types/types';
+import styles from './SectionDropdown.module.css';
+
+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>
+  );
+}
+
+export default 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>
+  );
+}