refactor for more react like style

Co-authored-by: Jannik Hollenbach <jannik@hollenbach.de>

Author: dpatanin

src/components/MenuMobile.js

@@ -9,17 +9,25 @@ const MenuMobile = props => {
     <Menu
       right
       id="slide"
-      width={"100vw"}
-      className={`main-menu-mobile ${props.active ? "open" : ""}`}
-      customBurgerIcon={<img src={hamburgerIcon} alt="menu"/>}
+      width={'100vw'}
+      className={`main-menu-mobile ${props.active ? 'open' : ''}`}
+      customBurgerIcon={<img src={hamburgerIcon} alt="menu" />}
       styles={{
         bmBurgerBars: {
-          height: "3px"
-        }
+          height: '3px',
+        },
       }}
     >
-      {menuLinks.map(link => (
-        <Link to={link.link} key={link.name}>{link.name}</Link>
+      {menuLinks.map((link) => (
+        <li key={link.name}>
+          {link.external ? (
+            <a href={link.link} target="_blank" rel="noopener noreferrer">
+              {link.name}
+            </a>
+          ) : (
+            <Link to={link.link}>{link.name}</Link>
+          )}
+        </li>
       ))}
     </Menu>
   );
@@ -33,6 +41,7 @@ export default props => (
           siteMetadata {
             menuLinks {
               name
+              external
               link
             }
           }

src/components/Sidebar.js

@@ -1,62 +1,51 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { Link } from 'gatsby';
 
-// Toggles sidebar menus, only one may be open at a time
-function toggleMenu(id) {
-  const element = document.getElementById(id);
+/**
+ * Interactive Sidebar with toggleable categories.
+ *
+ * @requires categories of form: [ { name: "foobar", entires: []} ]
+ */
+const Sidebar = ({ categories = [], currentPathname }) => {
+  const [selectedCategory, selectCategory] = useState(() => {
+    for (const { categoryName, entries } of categories) {
+      for (const entry of entries) {
+        if (
+          currentPathname === `/integrations/${entry.node.frontmatter.path}`
+        ) {
+          return categoryName;
+        }
+      }
+    }
 
-  const scanners = document.getElementById('Scanners');
-  const persistenceProviders = document.getElementById('Persistence Providers');
-  const hooks = document.getElementById('Hooks');
+    throw new Error(
+      `Could not find matching Category for path ${currentPathname}`
+    );
+  });
 
-  if (element !== scanners) scanners.style.display = 'none';
-  if (element !== persistenceProviders)
-    persistenceProviders.style.display = 'none';
-  if (element !== hooks) hooks.style.display = 'none';
-
-  element.style.display = element.style.display === 'block' ? 'none' : 'block';
-}
-
-// Determine the naming of Sidebar categories
-function getCategoryTitle(category) {
-  let categoryTitle = '';
-
-  switch (category[0].node.frontmatter.category) {
-    case 'scanner':
-      categoryTitle = 'Scanners';
-      break;
-
-    case 'hook':
-      categoryTitle =
-        category[0].node.frontmatter.type === 'persistenceProvider'
-          ? 'Persistence Providers'
-          : '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
-            onClick={() => toggleMenu(getCategoryTitle(category))}
+      {categories.map(({ categoryName, entries }) => (
+        <Fragment key={categoryName}>
+          <button
+            onClick={() =>
+              selectCategory(
+                selectedCategory === categoryName ? null : categoryName
+              )
+            }
             className="sidebar-header"
           >
-            {getCategoryTitle(category)}
-          </h1>
+            {categoryName}
+          </button>
           <ul
-            id={getCategoryTitle(category)}
+            id={categoryName}
+            name="Category"
             className="list-unstyled components show"
+            style={{
+              display: selectedCategory === categoryName ? 'block' : 'none',
+            }}
           >
-            {category.map((element) => (
+            {entries.map((element) => (
               <li key={element.node.frontmatter.title}>
                 <Link
                   to={`/integrations/${element.node.frontmatter.path}`}

src/scss/components/_sidebar.scss

@@ -92,7 +92,7 @@ a {
     -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
-	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
   }
   .sidebar-header:hover {
     cursor: pointer;
@@ -106,3 +106,13 @@ a {
   //Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
   transition: all 0.3s;
 }
+
+// removing button style
+button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  outline: inherit;
+}

src/templates/integration.js

@@ -2,7 +2,7 @@ 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'
+import Sidebar from '../components/Sidebar.js';
 
 const Integration = (props) => {
   const { title } = props.data.markdownRemark.frontmatter;
@@ -15,8 +15,14 @@ const Integration = (props) => {
   return (
     <Layout bodyClass="integration">
       <div className="sidebar-wrapper">
-        <Sidebar dataArray={[scanners, persistenceProviders, hooks]}/>
-
+        <Sidebar
+          categories={[
+            { categoryName: 'Scanners', entries: scanners },
+            { categoryName: 'Persistence Providers', entries: persistenceProviders },
+            { categoryName: 'Hooks', entries: hooks },
+          ]}
+          currentPathname={props.location.pathname}
+        />
         <div id="content">
           <div className="container-fluid" id="integration-doc">
             <h1 className="title">{title}</h1>