Make category pages work.

app/gatsby-node.js

@@ -1,7 +1,20 @@
-/**
+const fs = require("fs")
- * Implement Gatsby's Node APIs in this file.
+const categories = JSON.parse(fs.readFileSync("src/data/categories.json"))
- *
- * See: https://www.gatsbyjs.org/docs/node-apis/
- */
 
-// You can delete this file if you're not using it
+function createSlug (categoryName) {
+    const categoryNameLower = categoryName.toLowerCase();
+    return categoryNameLower.replace(" ", "-");
+};
+
+exports.createPages = ({ actions }) => {
+  const { createPage } = actions
+  categories.forEach(category => {
+    createPage({
+        path: createSlug(category.name),
+        component: require.resolve("./src/templates/categoryTemplate.js"),
+        context: {
+            categoryName: category.name
+        },
+      })
+    })
+}

app/src/components/sidebar.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Nav } from "react-bootstrap";
+import { StaticQuery, graphql } from "gatsby"
+import '../styles/sidebar.css'
+
+export default () => {
+    return (
+        <StaticQuery
+            query={graphql`query CategoryQuery {
+                allCategoriesJson {
+                  edges {
+                    node {
+                      id
+                      name
+                    }
+                  }
+                }
+              }
+            `}
+            render={data => (
+                <Nav className="col-md-12 d-none d-md-block bg-light sidebar"
+                    activeKey="/home"
+                    onSelect={selectedKey => alert(`selected ${selectedKey}`)}
+                >
+                    <div className="sidebar-sticky"></div>
+                    {data.allCategoriesJson.edges.map(function (x, index) {
+                        return (
+                            <Nav.Item>
+                                <Nav.Link href="/home">{x.node.name}</Nav.Link>
+                            </Nav.Item>
+                        )
+                    })}
+                </Nav>
+            )}
+        />
+    );
+};
+

app/src/data/categories.json

@@ -0,0 +1,56 @@
+[
+    {
+        "name": "Startups and Business"
+    },
+    {
+        "name": "Philosophy and Psychology"
+    },
+    {
+        "name": "Autobiographies and Biographies"
+    },
+    {
+        "name": "History"
+    },
+    {
+        "name": "Evolution, Science and Medicine"
+    },
+    {
+        "name": "Logic and Problem Solving"
+    },
+    {
+        "name": "Politics"
+    },
+    {
+        "name": "Economics"
+    },
+    {
+        "name": "Gender"
+    },
+    {
+        "name": "Sexuality"
+    },
+    {
+        "name": "Education"
+    },
+    {
+        "name": "Writing"
+    },
+    {
+        "name": "Theater and Film"
+    },
+    {
+        "name": "Fiction"
+    },
+    {
+        "name": "Health"
+    },
+    {
+        "name": "Travel"
+    },
+    {
+        "name": "Language"
+    },
+    {
+        "name": "Nature"
+    }
+]

app/src/styles/sidebar.css

@@ -0,0 +1,27 @@
+.sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    min-height: 100vh !important;
+    padding: 48px 0 0;
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+#sidebar-wrapper{
+    min-height: 100vh !important;
+    width: 100vw;
+    margin-left: -1rem;
+    -webkit-transition: margin .25s ease-out;
+    -moz-transition: margin .25s ease-out;
+    -o-transition: margin .25s ease-out;
+    transition: margin .25s ease-out;
+}
+#sidebar-wrapper .sidebar-heading {
+    padding: 0.875rem 1.25rem;
+    font-size: 1.2rem;
+}
+
+#page-content-wrapper {
+    min-width: 0;
+    width: 100%;
+}

app/src/templates/categoryTemplate.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "gatsby";
+
+const basicTemplate = props => {
+    const { pageContext } = props
+    const { categoryName } = pageContext
+  
+    return (
+        <div>
+            {categoryName}
+        </div>
+    )
+}
+export default basicTemplate