feat: add navigation between version 1 and 2

src/app/components/Main.module.css

@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0 auto;
+  overflow-y: auto;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: #848586;
+}

src/app/components/Main.tsx

@@ -0,0 +1,23 @@
+import { DocSection } from '../types/types';
+import styles from './Main.module.css';
+import Section from './Section';
+
+export default function Main({
+  versionSections,
+}: {
+  versionSections: DocSection[];
+}) {
+  return (
+    <main className={styles.container}>
+      {versionSections.map(section => (
+        <>
+          <Section key={section.title}>
+            {section.copy}
+            {section.example}
+          </Section>
+          <div className={styles.divider}>&nbsp;</div>
+        </>
+      ))}
+    </main>
+  );
+}

src/app/components/NavBar.tsx

@@ -2,17 +2,26 @@
 
 import Link from 'next/link.js';
 import { useState } from 'react';
+import { DocsStructure } from '../types/types.js';
 import styles from './NavBar.module.css';
 
-function NavbarDropdown() {
+function NavbarDropdown({ version }: { version: string }) {
-  const versions = ['Version 1', 'Version 2'];
+  const versions = {
+    version_001: {
+      name: 'Version 1',
+      path: '/version-1',
+    },
+    version_002: {
+      name: 'Version 2',
+      path: '/',
+    },
+  } as { [key: string]: { name: string; path: string } };
+
+  const currentVersion = versions[version];
 
   const [isDropdownOpen, setIsDropdownOpen] =
     useState<boolean>(false);
 
-  const [version, setVersion] =
-    useState<string>('Version 2');
-
   const handleDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
@@ -23,7 +32,7 @@ function NavbarDropdown() {
         className={styles.navLink}
         onClick={handleDropdownToggle}
       >
-        {version}{' '}
+        {currentVersion.name}{' '}
         {isDropdownOpen ? (
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -61,31 +70,35 @@ function NavbarDropdown() {
             : styles.dropdownMenu
         }
       >
-        {versions
+        {Object.keys(versions)
           .filter(v => v !== version)
           .map(v => (
-            <a
+            <Link
+              href={`${versions[v].path}`}
               key={v}
               className={styles.navLink}
               onClick={() => {
-                setVersion(v);
                 setIsDropdownOpen(false);
               }}
             >
-              {v}
+              {versions[v].name}
-            </a>
+            </Link>
           ))}
       </div>
     </>
   );
 }
 
-export default function NavBar() {
+export default function NavBar({
+  version,
+}: {
+  version: DocsStructure;
+}) {
   return (
     <nav className={styles.nav}>
       <ul className={styles.navList}>
         <li className={styles.navItem}>
-          <NavbarDropdown />
+          <NavbarDropdown version={version.version} />
         </li>
         <li className={styles.navItem}>
           <Link

src/app/components/SideBar.tsx

@@ -76,11 +76,9 @@ function ListTree({ docs }: { docs: Doc[] }) {
 }
 
 export default function SideBar({
-  versionOne,
+  version,
-  versionTwo,
 }: {
-  versionOne: DocsStructure;
+  version: DocsStructure;
-  versionTwo: DocsStructure;
 }) {
   return (
     <div className={styles.container}>
@@ -88,7 +86,7 @@ export default function SideBar({
         <span className={styles.onspring}>Onspring</span>{' '}
         <span className={styles.api}>API</span>
       </h1>
-      <ListTree docs={versionTwo.docs} />
+      <ListTree docs={version.docs} />
     </div>
   );
 }

src/app/layout.tsx

@@ -1,8 +1,4 @@
-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';
 import './globals.css';
 
 export const metadata = {
@@ -25,16 +21,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>
+      <body>{children}</body>
-        <SideBar
-          versionOne={versionOne}
-          versionTwo={versionTwo}
-        />
-        <div className="container">
-          <NavBar />
-          {children}
-        </div>
-      </body>
     </html>
   );
 }

src/app/lib/markdoc.ts

@@ -3,7 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import React, { ReactNode } from 'react';
 import Code from '../components/Code';
-import { Doc, Section } from './../types/types';
+import { Doc, DocSection } from './../types/types';
 const DOCS_PATH = path.join(process.cwd(), 'src/docs');
 
 function getCopyPath(version: string, doc: Doc): string {
@@ -78,8 +78,8 @@ function getExampleChild(version: string, doc: Doc) {
 export function loadSections(
   version: string,
   docs: Doc[],
-  sections: Section[] = []
+  sections: DocSection[] = []
-): Section[] {
+): DocSection[] {
   for (const doc of docs) {
     sections.push({
       title: doc.title,

src/app/page.tsx

@@ -1,25 +1,22 @@
 import { versionTwo } from '@/docs/version_002/docsStructure';
-import Section from './components/Section';
+import Main from './components/Main';
+import NavBar from './components/NavBar';
+import SideBar from './components/SideBar';
 import { loadSections } from './lib/markdoc';
-import styles from './page.module.css';
 
-export default function Home() {
+export default function Page() {
   const versionTwoSections = loadSections(
     versionTwo.version,
     versionTwo.docs
   );
 
   return (
-    <main className={styles.container}>
+    <>
-      {versionTwoSections.map(section => (
+      <SideBar version={versionTwo} />
-        <>
+      <div className="container">
-          <Section key={section.title}>
+        <NavBar version={versionTwo} />
-            {section.copy}
+        <Main versionSections={versionTwoSections} />
-            {section.example}
+      </div>
-          </Section>
+    </>
-          <div className={styles.divider}>&nbsp;</div>
-        </>
-      ))}
-    </main>
   );
 }

src/app/types/types.ts

@@ -13,7 +13,7 @@ export type Doc = {
   children?: Doc[];
 };
 
-export type Section = {
+export type DocSection = {
   title: string;
   copy: ReactNode;
   example: ReactNode;

src/app/version-1/page.tsx

@@ -0,0 +1,22 @@
+import { versionOne } from '@/docs/version_001/docsStructure';
+import Main from '../components/Main';
+import NavBar from '../components/NavBar';
+import SideBar from '../components/SideBar';
+import { loadSections } from '../lib/markdoc';
+
+export default function Page() {
+  const versionOneSections = loadSections(
+    versionOne.version,
+    versionOne.docs
+  );
+
+  return (
+    <>
+      <SideBar version={versionOne} />
+      <div className="container">
+        <NavBar version={versionOne} />
+        <Main versionSections={versionOneSections} />
+      </div>
+    </>
+  );
+}

src/docs/version_001/docsStructure.ts

@@ -2,13 +2,5 @@ import { DocsStructure } from '@/app/types/types';
 
 export const versionOne: DocsStructure = {
   version: 'version_001',
-  docs: [
+  docs: [],
-    {
-      title: 'Introduction',
-      folder: 'introduction',
-      copy: 'copy.md',
-      example: 'example.md',
-      children: [],
-    },
-  ],
 };