add side navigation bar

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;

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>
   );
 }

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>
             );
           })}