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 {