add icons

Author: dpatanin

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

@@ -1,5 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { Link } from 'gatsby';
+import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
 
 /**
  * Interactive Sidebar with toggleable categories.
@@ -10,9 +11,7 @@ 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}`
-        ) {
+        if (currentPathname.includes(entry.node.frontmatter.path)) {
           return categoryName;
         }
       }
@@ -33,9 +32,21 @@ const Sidebar = ({ categories = [], currentPathname }) => {
                 selectedCategory === categoryName ? null : categoryName
               )
             }
-            className="sidebar-header"
+            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}
@@ -46,7 +57,10 @@ const Sidebar = ({ categories = [], currentPathname }) => {
             }}
           >
             {entries.map((element) => (
-              <li key={element.node.frontmatter.title}>
+              <li
+                key={element.node.frontmatter.title}
+                className="sidebar-element"
+              >
                 <Link
                   to={`/integrations/${element.node.frontmatter.path}`}
                   activeClassName="active-Link"

src/components/Sidebar.js

@@ -52,7 +52,7 @@ a {
     min-width: 10px;
     max-width: 10px;
     text-align: center;
-    .sidebar-header {
+    .sidebar-category {
       h3 {
         display: none;
       }
@@ -81,23 +81,23 @@ a {
       }
     }
   }
-  .sidebar-header {
+  .sidebar-category {
     margin-bottom: 0px;
     padding: 20px;
-    width: auto;
+    width: 100%;
     font-size: 1.3rem;
-    // disable text selection on sidebar
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -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 */
+    text-align: left;
   }
-  .sidebar-header:hover {
+  .sidebar-category:hover {
     cursor: pointer;
     box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
   }
+  .sidebar-element {
+    font-size: 1rem;
+    a {
+      text-indent: 30px;
+    }
+  }
 }
 #content {
   width: auto;
@@ -107,12 +107,20 @@ a {
   transition: all 0.3s;
 }
 
-// removing button style
 button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  // Remove default button style
   background: none;
   color: inherit;
   border: none;
   padding: 0;
   cursor: pointer;
   outline: inherit;
 }
+
+*:focus {
+  outline: 0 !important;
+}