Skip to content
This repository was archived by the owner on Apr 21, 2026. It is now read-only.

Commit e9d80ae

Browse files
author
dpatanin
committed
Merge branch 'bugfix/v2-integrations-sidemenu' into feature/rework-navigation
2 parents 7ef6e38 + 036ebb5 commit e9d80ae

6 files changed

Lines changed: 116 additions & 71 deletions

File tree

‎package-lock.json‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"react-burger-menu": "^2.7.0",
3333
"react-dom": "^16.13.1",
3434
"react-helmet": "^6.1.0",
35+
"react-icons": "^3.11.0",
3536
"react-tabs": "^3.1.1"
3637
},
3738
"devDependencies": {

‎src/components/MenuMobile.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,25 @@ const MenuMobile = props => {
99
<Menu
1010
right
1111
id="slide"
12-
width={"100vw"}
13-
className={`main-menu-mobile ${props.active ? "open" : ""}`}
14-
customBurgerIcon={<img src={hamburgerIcon} alt="menu"/>}
12+
width={'100vw'}
13+
className={`main-menu-mobile ${props.active ? 'open' : ''}`}
14+
customBurgerIcon={<img src={hamburgerIcon} alt="menu" />}
1515
styles={{
1616
bmBurgerBars: {
17-
height: "3px"
18-
}
17+
height: '3px',
18+
},
1919
}}
2020
>
21-
{menuLinks.map(link => (
22-
<Link to={link.link} key={link.name}>{link.name}</Link>
21+
{menuLinks.map((link) => (
22+
<li key={link.name}>
23+
{link.external ? (
24+
<a href={link.link} target="_blank" rel="noopener noreferrer">
25+
{link.name}
26+
</a>
27+
) : (
28+
<Link to={link.link}>{link.name}</Link>
29+
)}
30+
</li>
2331
))}
2432
</Menu>
2533
);
@@ -33,6 +41,7 @@ export default props => (
3341
siteMetadata {
3442
menuLinks {
3543
name
44+
external
3645
link
3746
}
3847
}

‎src/components/Sidebar.js‎

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,66 @@
1-
import React, { Fragment } from 'react';
1+
import React, { Fragment, useState } from 'react';
22
import { Link } from 'gatsby';
3+
import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
34

4-
// Toggles sidebar menus, only one may be open at a time
5-
function toggleMenu(id) {
6-
const element = document.getElementById(id);
5+
/**
6+
* Interactive Sidebar with toggleable categories.
7+
*
8+
* @requires categories of form: [ { name: "foobar", entires: []} ]
9+
*/
10+
const Sidebar = ({ categories = [], currentPathname }) => {
11+
const [selectedCategory, selectCategory] = useState(() => {
12+
for (const { categoryName, entries } of categories) {
13+
for (const entry of entries) {
14+
if (currentPathname.includes(entry.node.frontmatter.path)) {
15+
return categoryName;
16+
}
17+
}
18+
}
719

8-
const scanners = document.getElementById('Scanners');
9-
const persistenceProviders = document.getElementById('Persistence Providers');
10-
const hooks = document.getElementById('Hooks');
20+
throw new Error(
21+
`Could not find matching Category for path ${currentPathname}`
22+
);
23+
});
1124

12-
if (element !== scanners) scanners.style.display = 'none';
13-
if (element !== persistenceProviders)
14-
persistenceProviders.style.display = 'none';
15-
if (element !== hooks) hooks.style.display = 'none';
16-
17-
element.style.display = element.style.display === 'block' ? 'none' : 'block';
18-
}
19-
20-
// Determine the naming of Sidebar categories
21-
function getCategoryTitle(category) {
22-
let categoryTitle = '';
23-
24-
switch (category[0].node.frontmatter.category) {
25-
case 'scanner':
26-
categoryTitle = 'Scanners';
27-
break;
28-
29-
case 'hook':
30-
categoryTitle =
31-
category[0].node.frontmatter.type === 'persistenceProvider'
32-
? 'Persistence Providers'
33-
: 'Hooks';
34-
break;
35-
36-
default:
37-
categoryTitle = 'Unknown Category';
38-
break;
39-
}
40-
41-
return categoryTitle;
42-
}
43-
44-
const Sidebar = (props) => {
4525
return (
4626
<nav className="sidebar">
47-
{props.dataArray.map((category, index) => (
48-
<Fragment key={index}>
49-
<h1
50-
onClick={() => toggleMenu(getCategoryTitle(category))}
51-
className="sidebar-header"
27+
{categories.map(({ categoryName, entries }) => (
28+
<Fragment key={categoryName}>
29+
<button
30+
onClick={() =>
31+
selectCategory(
32+
selectedCategory === categoryName ? null : categoryName
33+
)
34+
}
35+
className="sidebar-category"
5236
>
53-
{getCategoryTitle(category)}
54-
</h1>
37+
{categoryName}
38+
<IoIosArrowDown
39+
className="arrow"
40+
style={{
41+
display: selectedCategory === categoryName ? 'block' : 'none',
42+
}}
43+
/>
44+
<IoIosArrowForward
45+
className="arrow"
46+
style={{
47+
display: selectedCategory === categoryName ? 'none' : 'block',
48+
}}
49+
/>
50+
</button>
5551
<ul
56-
id={getCategoryTitle(category)}
52+
id={categoryName}
53+
name="Category"
5754
className="list-unstyled components show"
55+
style={{
56+
display: selectedCategory === categoryName ? 'block' : 'none',
57+
}}
5858
>
59-
{category.map((element) => (
60-
<li key={element.node.frontmatter.title}>
59+
{entries.map((element) => (
60+
<li
61+
key={element.node.frontmatter.title}
62+
className="sidebar-element"
63+
>
6164
<Link
6265
to={`/integrations/${element.node.frontmatter.path}`}
6366
activeClassName="active-Link"

‎src/scss/components/_sidebar.scss‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ a {
5252
min-width: 10px;
5353
max-width: 10px;
5454
text-align: center;
55-
.sidebar-header {
55+
.sidebar-category {
5656
h3 {
5757
display: none;
5858
}
@@ -81,23 +81,23 @@ a {
8181
}
8282
}
8383
}
84-
.sidebar-header {
84+
.sidebar-category {
8585
margin-bottom: 0px;
8686
padding: 20px;
87-
width: auto;
87+
width: 100%;
8888
font-size: 1.3rem;
89-
// disable text selection on sidebar
90-
-webkit-touch-callout: none; /* iOS Safari */
91-
-webkit-user-select: none; /* Safari */
92-
-khtml-user-select: none; /* Konqueror HTML */
93-
-moz-user-select: none; /* Old versions of Firefox */
94-
-ms-user-select: none; /* Internet Explorer/Edge */
95-
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
89+
text-align: left;
9690
}
97-
.sidebar-header:hover {
91+
.sidebar-category:hover {
9892
cursor: pointer;
9993
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
10094
}
95+
.sidebar-element {
96+
font-size: 1rem;
97+
a {
98+
text-indent: 30px;
99+
}
100+
}
101101
}
102102
#content {
103103
width: auto;
@@ -106,3 +106,21 @@ a {
106106
//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)
107107
transition: all 0.3s;
108108
}
109+
110+
button {
111+
display: flex;
112+
justify-content: space-between;
113+
align-items: center;
114+
115+
// Remove default button style
116+
background: none;
117+
color: inherit;
118+
border: none;
119+
padding: 0;
120+
cursor: pointer;
121+
outline: inherit;
122+
}
123+
124+
*:focus {
125+
outline: 0 !important;
126+
}

‎src/templates/integration.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { graphql } from 'gatsby';
33
import Layout from '../components/Layout';
44
import ScannerExamples from '../components/ScannerExamples.js';
5-
import Sidebar from '../components/Sidebar.js'
5+
import Sidebar from '../components/Sidebar.js';
66

77
const Integration = (props) => {
88
const { title } = props.data.markdownRemark.frontmatter;
@@ -15,8 +15,14 @@ const Integration = (props) => {
1515
return (
1616
<Layout bodyClass="integration">
1717
<div className="sidebar-wrapper">
18-
<Sidebar dataArray={[scanners, persistenceProviders, hooks]}/>
19-
18+
<Sidebar
19+
categories={[
20+
{ categoryName: 'Scanners', entries: scanners },
21+
{ categoryName: 'Persistence Providers', entries: persistenceProviders },
22+
{ categoryName: 'Hooks', entries: hooks },
23+
]}
24+
currentPathname={props.location.pathname}
25+
/>
2026
<div id="content">
2127
<div className="container-fluid" id="integration-doc">
2228
<h1 className="title">{title}</h1>

0 commit comments

Comments
 (0)