feat: work on displaying doc structure in sidebar

2023-04-09 00:24:42 -05:00
parent 52416307ee
commit 34e1c68a2f
12 changed files with 220 additions and 5 deletions
@@ -1,12 +1,93 @@
+'use client';
+
+import { useState } from 'react';
+import { DocsStructure } from '../types/types.js';
 import styles from './SideBar.module.css';

-export default function SideBar() {
+function TreeNode({ doc }: { doc: DocsStructure }) {
+  const [isExpanded, setIsExpanded] =
+    useState<boolean>(true);
+
+  const hasChildren =
+    doc.children && doc.children?.length > 0;
+
+  return (
+    <li className={styles.listItem}>
+      {hasChildren ? (
+        <div className={styles.expandable}>
+          <a
+            onClick={() => setIsExpanded(!isExpanded)}
+            className={styles.link}
+          >
+            {doc.title}
+          </a>
+          {isExpanded ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              className={styles.chevron}
+              viewBox="0 0 16 16"
+            >
+              <path
+                fillRule="evenodd"
+                d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              fill="currentColor"
+              className={styles.chevron}
+              viewBox="0 0 16 16"
+            >
+              <path
+                fillRule="evenodd"
+                d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+              />
+            </svg>
+          )}
+        </div>
+      ) : (
+        <a href={`#${doc.title}`} className={styles.link}>
+          {doc.title}
+        </a>
+      )}
+
+      {doc.children &&
+        doc.children?.length > 0 &&
+        isExpanded && <ListTree docs={doc.children} />}
+    </li>
+  );
+}
+
+function ListTree({ docs }: { docs: DocsStructure[] }) {
+  return (
+    <ul className={styles.list}>
+      {docs.map(d => (
+        <TreeNode key={d.title} doc={d} />
+      ))}
+    </ul>
+  );
+}
+
+export default function SideBar({
+  versionOne,
+  versionTwo,
+}: {
+  versionOne: DocsStructure[];
+  versionTwo: DocsStructure[];
+}) {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>
        <span className={styles.onspring}>Onspring</span>{' '}
        <span className={styles.api}>API</span>
      </h1>
+      <ListTree docs={versionTwo} />
    </div>
  );
 }