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({
-      title: doc.title,
-      copy: getCopyChild(version, doc),
-      example: getExampleChild(version, doc),
-    });
+    if (doc.copy && doc.example) {
+      sections.push({
+        title: doc.title,
+        copy: getCopyChild(version, doc),
+        example: getExampleChild(version, doc),
+      });
+    }
 
     if (doc.children && doc.children.length > 0) {
       loadSections(version, doc.children, sections);