From 6d9d0898829a18b59b2e9e4bd00a98894b0ca2df Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Fri, 28 Apr 2023 07:54:37 -0500
Subject: [PATCH] feat: add all doc titles to nav dropdown

---
 src/app/components/SectionDropdown.tsx | 66 ++++++++++++--------------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/app/components/SectionDropdown.tsx b/src/app/components/SectionDropdown.tsx
index 83c430d..e6ff1a6 100644
--- a/src/app/components/SectionDropdown.tsx
+++ b/src/app/components/SectionDropdown.tsx
@@ -1,39 +1,8 @@
-import { Fragment } from 'react';
 import { useSectionContext } from '../context/section';
 import { Doc, DocsStructure } from '../types/types';
 import { toKebabCase } from '../utils/stringUtils';
 import styles from './SectionDropdown.module.css';
 
-function SectionDropdownOption({ doc }: { doc: Doc }) {
-  return (
-    <Fragment>
-      {doc.copy && doc.example && (
-        <option
-          className={styles.selectItem}
-          label={doc.title}
-          value={toKebabCase(doc.title)}
-        >
-          {doc.title}
-        </option>
-      )}
-      {doc.children && doc.children.length > 0 && (
-        <optgroup label={doc.title}>
-          {doc.children.map(child => (
-            <option
-              value={toKebabCase(child.title)}
-              className={styles.selectItem}
-              label={child.title}
-              key={child.title}
-            >
-              {child.title}
-            </option>
-          ))}
-        </optgroup>
-      )}
-    </Fragment>
-  );
-}
-
 export default function SectionDropdown({
   version,
 }: {
@@ -45,6 +14,22 @@ export default function SectionDropdown({
     location.hash = e.target.value;
   };
 
+  const getAllDocs = (docs: Doc[]) => {
+    let result: Doc[] = [];
+
+    docs.forEach(doc => {
+      result.push(doc);
+
+      if (doc.children && doc.children.length > 0) {
+        result = result.concat(getAllDocs(doc.children));
+      }
+    });
+
+    return result;
+  };
+
+  const docs = getAllDocs(version.docs);
+
   return (
     <select
       onChange={handleSelectChange}
@@ -52,12 +37,23 @@ export default function SectionDropdown({
       className={styles.dropdownSelect}
       value={section}
     >
-      {version.docs.map(doc => {
+      {docs.map(doc => {
+        if (
+          doc.copy === undefined ||
+          doc.example === undefined
+        ) {
+          return null;
+        }
+
         return (
-          <SectionDropdownOption
-            doc={doc}
+          <option
+            className={styles.selectItem}
+            label={doc.title}
+            value={toKebabCase(doc.title)}
             key={doc.title}
-          />
+          >
+            {doc.title}
+          </option>
         );
       })}
     </select>