From 76a9f0f208207d51221b2e83d2bb1e017e640f5b Mon Sep 17 00:00:00 2001
From: jasongao97 <jasongao97@gmail.com>
Date: Tue, 9 Aug 2022 15:21:54 -0400
Subject: [PATCH] add side navigation bar

---
 src/components/SideBar.js    | 40 ++++++++++++++++++++++++++++++++++++
 src/layouts/ChapterLayout.js |  6 +++++-
 src/pages/index.js           |  2 +-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SideBar.js

diff --git a/src/components/SideBar.js b/src/components/SideBar.js
new file mode 100644
index 0000000..4453193
--- /dev/null
+++ b/src/components/SideBar.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useStaticQuery, graphql, Link } from 'gatsby';
+
+const SideBar = () => {
+  const data = useStaticQuery(graphql`
+    query QueryChaptersLink {
+      allChaptersJson {
+        edges {
+          node {
+            id
+            title
+            slug
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <aside className="sticky top-1 hidden md:block">
+      <ul className="my-4 space-y-2 border-l-2">
+        {data.allChaptersJson.edges.map(({ node }) => {
+          return (
+            <li key={node.slug}>
+              <Link
+                to={`/${node.slug}/`}
+                className="block font-semibold text-sm hover:underline pl-3 -ml-0.5 border-l-2"
+                activeClassName="border-noc-400"
+              >
+                {node.title}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </aside>
+  );
+};
+
+export default SideBar;
diff --git a/src/layouts/ChapterLayout.js b/src/layouts/ChapterLayout.js
index 64c7499..36e9114 100644
--- a/src/layouts/ChapterLayout.js
+++ b/src/layouts/ChapterLayout.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { graphql } from 'gatsby';
 
 import Layout from '../components/Layout';
+import SideBar from '../components/SideBar';
 
 import { transformContent } from '../utils/transformContent';
 
@@ -15,7 +16,10 @@ export default function ChapterLayout({ data }) {
 
   return (
     <Layout title={chapter.title}>
-      <div className="my-8 mx-auto prose">{body}</div>
+      <div className="mx-auto md:flex justify-center items-start md:space-x-8">
+        <SideBar />
+        <div className="my-8 prose">{body}</div>
+      </div>
     </Layout>
   );
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index 593cc55..0263158 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -11,7 +11,7 @@ export default function IndexPage({ data }) {
           {data.allChaptersJson.edges.map(({ node }) => {
             return (
               <li key={node.id}>
-                <Link to={`/${node.slug}`}>{node.title}</Link>
+                <Link to={`/${node.slug}/`}>{node.title}</Link>
               </li>
             );
           })}