feat: work on displaying doc structure in sidebar

src/app/components/Article.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+}
+
+.copy {
+  flex: 1;
+}
+
+.example {
+  flex: 1;
+}

src/app/components/Article.tsx

@@ -0,0 +1,14 @@
+import styles from './Article.module.css';
+
+export default function Article() {
+  return (
+    <article className={styles.container}>
+      <section className={styles.copy}>
+        This is the copy
+      </section>
+      <section className={styles.example}>
+        This is the example
+      </section>
+    </article>
+  );
+}

src/app/components/SideBar.module.css

@@ -9,6 +9,7 @@
 .title {
   font-size: 1rem;
   white-space: nowrap;
+  margin-bottom: 1rem;
 }
 
 .onspring {
@@ -19,4 +20,41 @@
 .api {
   font-weight: bold;
   color: #ee7203;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.listItem {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  cursor: pointer;
+  padding: 0 0.5rem;
+}
+
+.link {
+  text-decoration: none;
+  color: #a3acb9;
+}
+
+.link:hover {
+  color: white;
+}
+
+.expandable {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.chevron {
+  margin-left: 0.5rem;
 }

src/app/components/SideBar.tsx

@@ -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>
   );
 }

src/app/layout.tsx

@@ -1,3 +1,5 @@
+import { versionOne } from '@/docs/version_001/docsStructure';
+import { versionTwo } from '@/docs/version_002/docsStructure';
 import { ReactNode } from 'react';
 import NavBar from './components/NavBar';
 import SideBar from './components/SideBar';
@@ -16,7 +18,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <SideBar />
+        <SideBar
+          versionOne={versionOne}
+          versionTwo={versionTwo}
+        />
         <div className="container">
           <NavBar />
           {children}

src/app/page.module.css

@@ -0,0 +1,10 @@
+.container {
+  margin: 0 auto;
+  max-width: 1450px;
+  padding: 5rem;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

src/app/page.tsx

@@ -1,9 +1,10 @@
+import Article from './components/Article';
 import styles from './page.module.css';
 
 export default function Home() {
   return (
-    <div className={styles.container}>
+    <main className={styles.container}>
-      <h1 className={styles.title}>Onspring API Docs</h1>
+      <Article />
-    </div>
+    </main>
   );
 }

src/app/types/types.ts

@@ -0,0 +1,7 @@
+export type DocsStructure = {
+  title: string;
+  folder: string;
+  copy?: string;
+  example?: string;
+  children?: DocsStructure[];
+};

src/docs/version_001/docsStructure.ts

@@ -0,0 +1,11 @@
+import { DocsStructure } from '@/app/types/types';
+
+export const versionOne: DocsStructure[] = [
+  {
+    title: 'Introduction',
+    folder: 'introduction',
+    copy: 'copy.md',
+    example: 'example.md',
+    children: [],
+  },
+];

src/docs/version_002/docsStructure.ts

@@ -0,0 +1,34 @@
+import { DocsStructure } from '@/app/types/types';
+
+export const versionTwo: DocsStructure[] = [
+  {
+    title: 'Introduction',
+    folder: 'introduction',
+    copy: 'copy.md',
+    example: 'example.md',
+    children: [
+      {
+        title: 'What is this?',
+        folder: 'what-is-this',
+        copy: 'copy.md',
+        example: 'example.md',
+        children: [],
+      },
+    ],
+  },
+  {
+    title: 'Authentication',
+    folder: 'authentication',
+    copy: 'copy.md',
+    example: 'example.md',
+    children: [
+      {
+        title: 'Login',
+        folder: 'login',
+        copy: 'copy.md',
+        example: 'example.md',
+        children: [],
+      },
+    ],
+  },
+];