feat: work on displaying more complex doc structure

src/app/components/Main.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import { DocSection } from '../types/types';
 import styles from './Main.module.css';
 import Section from './Section';
@@ -10,13 +11,13 @@ export default function Main({
   return (
     <main className={styles.container}>
       {versionSections.map(section => (
-        <>
+        <Fragment key={section.title}>
           <Section key={section.title}>
             {section.copy}
             {section.example}
           </Section>
           <div className={styles.divider}>&nbsp;</div>
-        </>
+        </Fragment>
       ))}
     </main>
   );

src/app/components/SideBar.module.css

@@ -27,18 +27,22 @@
   flex-direction: column;
   gap: 0.25rem;
   white-space: nowrap;
+  width: 100%;
 }
 
 .listItem {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0.5rem;
+  gap: 0.25rem;
   cursor: pointer;
-  padding: 0 0.5rem;
+  padding-left: 0.5rem;
+  margin-right: 1rem;
+  width: 100%;
 }
 
-.link {
+.link,
+.activeLink {
   text-decoration: none;
   color: #a3acb9;
 }
@@ -47,12 +51,16 @@
   color: white;
 }
 
+.activeLink {
+  background-color: #1e1e1e;
+}
+
 .expandable {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 1rem;
+  gap: 3rem;
 }
 
 .chevron {

src/app/lib/markdoc.ts

@@ -81,11 +81,13 @@ export function loadSections(
   sections: DocSection[] = []
 ): DocSection[] {
   for (const doc of docs) {
-    sections.push({
+    if (doc.copy && doc.example) {
-      title: doc.title,
+      sections.push({
-      copy: getCopyChild(version, doc),
+        title: doc.title,
-      example: getExampleChild(version, doc),
+        copy: getCopyChild(version, doc),
-    });
+        example: getExampleChild(version, doc),
+      });
+    }
 
     if (doc.children && doc.children.length > 0) {
       loadSections(version, doc.children, sections);

src/docs/version_002/docsStructure.ts

@@ -17,5 +17,26 @@ export const versionTwo: DocsStructure = {
       example: 'example.md',
       children: [],
     },
+    {
+      title: 'Resources',
+      folder: 'resources',
+      children: [
+        {
+          title: 'Records',
+          folder: 'resources/records',
+          copy: 'copy.md',
+          example: 'example.md',
+          children: [
+            {
+              title: 'Get Records by App',
+              folder:
+                'resources/records/get_records_by_app',
+              copy: 'copy.md',
+              example: 'example.md',
+            },
+          ],
+        },
+      ],
+    },
   ],
 };

src/docs/version_002/resources/records/copy.md

@@ -0,0 +1 @@
+# The Record Object

src/docs/version_002/resources/records/example.md

@@ -0,0 +1 @@
+# Records

src/docs/version_002/resources/records/get_records_by_app/copy.md

@@ -0,0 +1,3 @@
+# Get Records by App
+
+Some place holder text.

src/docs/version_002/resources/records/get_records_by_app/example.md

@@ -0,0 +1,34 @@
+{% code heading="GET /Records/appId/{appID}" language="text" %}
+
+```curl
+curl --location 'https://api.onspring.com/Records/appId/195' \
+--header 'X-ApiKey: 61642d8c686f9e8747e42af8/52cae9a9-4c49-48b6-a3fe-10a48d46ac69'
+```
+
+{% /code %}
+
+{% code heading="RESPONSE" language="json" %}
+
+```json
+{
+  "pageNumber": 1,
+  "pageSize": 1,
+  "totalPages": 1,
+  "totalRecords": 1,
+  "items": [
+    {
+      "appId": 195,
+      "recordId": 1,
+      "fieldData": [
+        {
+          "type": "Integer",
+          "fieldId": 6976,
+          "value": 1
+        }
+      ]
+    }
+  ]
+}
+```
+
+{% /code %}