Merge pull request #14 from secureCodeBox/bugfix/v2-integrations-sidemenu

Bugfix/v2 integrations sidemenu

Author: J12934

package-lock.json

@@ -29,6 +29,7 @@
     "react-burger-menu": "^2.7.0",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.1.0",
+    "react-icons": "^3.11.0",
     "react-tabs": "^3.1.1"
   },
   "devDependencies": {

package.json

@@ -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/MenuMobile.js

@@ -5,9 +5,6 @@ import 'react-tabs/style/react-tabs.css';
 
 const PREFIX = 23
 export default function ScannerExamples(props) {
-
-    console.log(props.scanner);
-
     const scanner = props.scanner.substring(PREFIX);
     const query = graphql`
             query {

src/components/ScannerExamples.js

@@ -0,0 +1,76 @@
+import React, { Fragment, useState } from 'react';
+import { Link } from 'gatsby';
+import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
+
+/**
+ * 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.includes(entry.node.frontmatter.path)) {
+          return categoryName;
+        }
+      }
+    }
+    return null;
+  });
+
+  return (
+    <nav className="sidebar">
+      {categories.map(({ categoryName, entries }) => (
+        <Fragment key={categoryName}>
+          <button
+            onClick={() =>
+              selectCategory(
+                selectedCategory === categoryName ? null : categoryName
+              )
+            }
+            className="sidebar-category"
+          >
+            {categoryName}
+            <IoIosArrowDown
+              className="arrow"
+              style={{
+                display: selectedCategory === categoryName ? 'block' : 'none',
+              }}
+            />
+            <IoIosArrowForward
+              className="arrow"
+              style={{
+                display: selectedCategory === categoryName ? 'none' : 'block',
+              }}
+            />
+          </button>
+          <ul
+            id={categoryName}
+            name="Category"
+            className="list-unstyled components show"
+            style={{
+              display: selectedCategory === categoryName ? 'block' : 'none',
+            }}
+          >
+            {entries.map((element) => (
+              <li
+                key={element.node.frontmatter.title}
+                className="sidebar-element"
+              >
+                <Link
+                  to={`/integrations/${element.node.frontmatter.path}`}
+                  activeClassName="active-Link"
+                >
+                  {element.node.frontmatter.title}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </Fragment>
+      ))}
+    </nav>
+  );
+};
+
+export default Sidebar;