add collapsible component to sidebar

Author: dpatanin

src/components/Collapsible.js

@@ -244,7 +244,7 @@ class Collapsible extends Component {
           tabIndex={this.props.tabIndex && this.props.tabIndex}
           {...this.props.triggerElementProps}
         >
-          <div class="collapsible-header">
+          <div className="collapsible-header">
             {trigger}
             <IoIosArrowDown
               style={{

src/components/ScannerExamples.js

@@ -23,7 +23,7 @@ export default function ScannerExamples({ examples: allExamples }) {
         return (
           <Tabs key={targetName}>
             <Collapsible
-              lazyRender
+              lazyRender={true}
               transitionTime={150}
               trigger={targetName}
               triggerTagName="h3"

src/components/Sidebar.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { Link } from 'gatsby';
-import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
+import Collapsible from './Collapsible';
 
 /**
  * Interactive Sidebar with toggleable categories.
@@ -23,50 +23,40 @@ const Sidebar = ({ categories = [], currentPathname }) => {
     <nav className="sidebar">
       {categories.map(({ categoryName, entries }) => (
         <Fragment key={categoryName}>
-          <button
-            onClick={() =>
+          <Collapsible
+            className="sidebar-category"
+            openedClassName="sidebar-category"
+            transitionTime={150}
+            transitionCloseTime={50}
+            trigger={categoryName}
+            triggerTagName="div"
+            open={selectedCategory === categoryName}
+            onTriggerOpening={() => {
               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"
+            <ul
+              id={categoryName}
+              name="Category"
+              className="list-unstyled components show"
+            >
+              {entries.map((element) => (
+                <li
+                  key={element.node.frontmatter.title}
+                  className="sidebar-element"
                 >
-                  {element.node.frontmatter.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
+                  <Link
+                    to={`/integrations/${element.node.frontmatter.path}`}
+                    activeClassName="active-Link"
+                  >
+                    {element.node.frontmatter.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </Collapsible>
         </Fragment>
       ))}
     </nav>

src/scss/components/_sidebar.scss

@@ -62,7 +62,7 @@ a {
     }
   }
   ul {
-    display: none;
+    margin-top: 20px;
     li {
       a {
         text-align: left;
@@ -89,7 +89,6 @@ a {
     text-align: left;
   }
   .sidebar-category:hover {
-    cursor: pointer;
     box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
   }
   .sidebar-element {