add persistence provider to sidebar

Author: dpatanin

src/scss/components/_sidebar.scss

@@ -64,7 +64,7 @@ span {
 	@include media-breakpoint-down(sm) {
 		display: none;
 	}
-	width: 8vw;
+	width: 10vw;
     background: $secureCodeBlue;
     height: 100vh;
     align-self: flex-start;
@@ -139,17 +139,13 @@ span {
 			}
 		}
 		&.components {
-			padding: 20px 0;
 		}
 	}
 	.sidebar-header {
 		padding: 20px;
         background: $highlight;
-        width: auto;
-		strong {
-			display: none;
-			font-size: 1.8em;
-		}
+		width: auto;
+		font-size: 1.3rem;
 	}
 }
 a[aria-expanded="true"] {

src/templates/integration.js

@@ -2,15 +2,17 @@ import React from "react";
 import { graphql, Link } from "gatsby";
 import Layout from "../components/Layout";
 
-const Integration = ({ data }) => {
-  const { title } = data.markdownRemark.frontmatter;
-  const { html } = data.markdownRemark;
-  const scanner = data.allMarkdownRemark.edges;
+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;
 
   return (
     <Layout bodyClass="integration">
       <div className="sidebar-wrapper">
         <nav className="sidebar">
+          <h1 className="sidebar-header">Scanner</h1>
           <ul class="list-unstyled components">
             {scanner.map(scanner => (
               <li>
@@ -23,6 +25,19 @@ const Integration = ({ data }) => {
               </li>
             ))}
           </ul>
+          <h1 className="sidebar-header">Persistence provider</h1>
+          <ul class="list-unstyled components">
+            {persistenceProvider.map(persistenceProvider => (
+              <li>
+                <Link
+                  to={persistenceProvider.node.frontmatter.path}
+                  activeClassName="active-Link"
+                >
+                  {persistenceProvider.node.frontmatter.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
         </nav>
 
         <div id="content">
@@ -47,7 +62,7 @@ export const query = graphql`
       }
       html
     }
-    allMarkdownRemark(
+    scanner: allMarkdownRemark(
       filter: { frontmatter: { category: { eq: "scanner" } } }
       sort: { fields: [frontmatter___title], order: ASC }
     ) {
@@ -64,6 +79,23 @@ export const query = graphql`
         }
       }
     }
+    persistenceProvider: allMarkdownRemark(
+      filter: {
+        fileAbsolutePath: { regex: "/integrations/persistence-provider/" }
+      }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+            path
+            category
+          }
+          id
+          html
+        }
+      }
+    }
   }
 `;