Create own component for sidebar

Author: dpatanin

src/components/Sidebar.js

@@ -0,0 +1,49 @@
+import React, { Fragment } from 'react';
+import { Link } from 'gatsby';
+
+// Determine the naming of Sidebar categories
+function getCategoryTitle(category) {
+  let categoryTitle = '';
+
+  switch (category[0].node.frontmatter.category) {
+    case 'scanner':
+      categoryTitle = 'Scanners';
+      break;
+
+    case 'hook':
+        category[0].node.frontmatter.type === 'persistenceProvider' ? categoryTitle = 'Persistence Providers' : categoryTitle = 'Hooks';
+      break;
+
+    default:
+        categoryTitle = 'Unknown Category';
+      break;
+  }
+
+  return categoryTitle;
+}
+
+const Sidebar = (props) => {
+  return (
+    <nav className="sidebar">
+      {props.dataArray.map((category, index) => (
+        <Fragment key={index}>
+          <h1 className="sidebar-header">{getCategoryTitle(category)}</h1>
+          <ul className="list-unstyled components">
+            {category.map((element) => (
+              <li key={element.node.frontmatter.title}>
+                <Link
+                  to={`/integrations/${element.node.frontmatter.path}`}
+                  activeClassName="active-Link"
+                >
+                  {element.node.frontmatter.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </Fragment>
+      ))}
+    </nav>
+  );
+};
+
+export default Sidebar;

src/templates/integration.js

@@ -1,54 +1,28 @@
-import React from "react";
-import { graphql, Link } from "gatsby";
-import Layout from "../components/Layout";
-import ScannerExamples from "../components/ScannerExamples.js";
+import React from 'react';
+import { graphql } from 'gatsby';
+import Layout from '../components/Layout';
+import ScannerExamples from '../components/ScannerExamples.js';
+import Sidebar from '../components/Sidebar.js'
 
-const Integration = props => {
+const Integration = (props) => {
   const { title } = props.data.markdownRemark.frontmatter;
   const { html } = props.data.markdownRemark;
-  const scanner = props.data.scanner.edges;
-  const persistenceProvider = props.data.persistenceProvider.edges;
+  const scanners = props.data.scanner.edges;
+  const persistenceProviders = props.data.persistenceProvider.edges;
+  const hooks = props.data.hook.edges;
 
   return (
     <Layout bodyClass="integration">
       <div className="sidebar-wrapper">
-        <nav className="sidebar">
-          <h1 className="sidebar-header">Scanner</h1>
-          <ul className="list-unstyled components">
-            {scanner.map(scanner => (
-              <li key={scanner.node.frontmatter.title}>
-                <Link
-                  to={`/integrations/${scanner.node.frontmatter.path}`}
-                  activeClassName="active-Link"
-                >
-                  {scanner.node.frontmatter.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-          <h1 className="sidebar-header">Hooks</h1>
-          <ul className="list-unstyled components">
-            {persistenceProvider.map(persistenceProvider => (
-              <li key={persistenceProvider.node.frontmatter.title}>
-                <Link
-                  to={`/integrations/${persistenceProvider.node.frontmatter.path}`}
-                  activeClassName="active-Link"
-                >
-                  {persistenceProvider.node.frontmatter.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </nav>
-
+        <Sidebar dataArray={[scanners, persistenceProviders, hooks]}/>
         <div id="content">
           <div className="container-fluid" id="integration-doc">
             <h1 className="title">{title}</h1>
             <div
               className="content"
               dangerouslySetInnerHTML={{ __html: html }}
             />
-          <ScannerExamples scanner={props.path} />
+            <ScannerExamples scanner={props.path} />
           </div>
         </div>
       </div>
@@ -76,24 +50,56 @@ export const query = graphql`
             path
             category
             usecase
+            type
+            state
+            appVersion
           }
         }
       }
     }
-    persistenceProvider: allMarkdownRemark(
+    hook: allMarkdownRemark(
       filter: {
-        fileAbsolutePath: { regex: "/integrations/persistence-provider/" }
+        frontmatter: {
+          category: { eq: "hook" }
+          type: { ne: "persistenceProvider" }
+        }
       }
+      sort: { fields: [frontmatter___title], order: ASC }
     ) {
       edges {
         node {
+          html
           frontmatter {
             title
             path
             category
+            usecase
+            type
+            state
           }
-          id
+        }
+      }
+    }
+    persistenceProvider: allMarkdownRemark(
+      filter: {
+        frontmatter: {
+          category: { eq: "hook" }
+          type: { eq: "persistenceProvider" }
+        }
+      }
+      sort: { fields: [frontmatter___title], order: ASC }
+    ) {
+      edges {
+        node {
           html
+          frontmatter {
+            title
+            path
+            category
+            usecase
+            type
+            state
+          }
         }
       }
     }