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

Commit dec4511

Browse files
J12934J12934
authored
Merge pull request #18 from secureCodeBox/feature/collapsible-component
Feature/collapsible component
2 parents 8ec6b25 + 73daab2 commit dec4511

8 files changed

Lines changed: 113 additions & 62 deletions

File tree

‎package-lock.json‎

Lines changed: 5 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
@@ -31,6 +31,7 @@
3131
"lodash": "^4.17.20",
3232
"react": "^16.13.1",
3333
"react-burger-menu": "^2.7.0",
34+
"react-collapsible": "^2.8.0",
3435
"react-dom": "^16.13.1",
3536
"react-helmet": "^6.1.0",
3637
"react-icons": "^3.11.0",

‎src/components/Collapsible.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { Fragment } from "react";
2+
import Collapsible from "react-collapsible";
3+
import { IoIosArrowDown, IoIosArrowForward } from "react-icons/io";
4+
5+
export default function CollapsibleWrapper({ trigger, children, ...props }) {
6+
const triggerComponent = (
7+
<Fragment>
8+
{trigger}
9+
<IoIosArrowDown className="arrow-down" />
10+
<IoIosArrowForward className="arrow-up" />
11+
</Fragment>
12+
);
13+
return (
14+
<Collapsible trigger={triggerComponent} {...props}>
15+
{children}
16+
</Collapsible>
17+
);
18+
}

‎src/components/ScannerExamples.js‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from "react";
2-
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
3-
import "react-tabs/style/react-tabs.css";
4-
5-
import groupBy from "lodash/groupBy";
6-
import mapValues from "lodash/mapValues";
1+
import groupBy from 'lodash/groupBy';
2+
import mapValues from 'lodash/mapValues';
3+
import React from 'react';
4+
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
5+
import 'react-tabs/style/react-tabs.css';
6+
import Collapsible from './Collapsible';
77

88
export default function ScannerExamples({ examples: allExamples }) {
99
const exampleGroups = mapValues(
@@ -21,20 +21,28 @@ export default function ScannerExamples({ examples: allExamples }) {
2121
{Object.entries(exampleGroups).map(([targetName, examples]) => {
2222
return (
2323
<Tabs key={targetName}>
24-
<h3>{targetName}</h3>
25-
<TabList>
26-
{examples.map(({ fileName }) => (
27-
<Tab key={fileName}>{fileName.split(".")[0]}</Tab>
28-
))}
29-
</TabList>
24+
<Collapsible
25+
overflowWhenOpen="visible"
26+
lazyRender={true}
27+
transitionTime={150}
28+
transitionCloseTime={50}
29+
trigger={targetName}
30+
triggerTagName="h3"
31+
>
32+
<TabList>
33+
{examples.map(({ fileName }) => (
34+
<Tab key={fileName}>{fileName.split('.')[0]}</Tab>
35+
))}
36+
</TabList>
3037

31-
{examples.map(({ fileName, content }) => (
32-
<TabPanel key={fileName}>
33-
<deckgo-highlight-code theme="cobalt">
34-
<code slot="code">{content}</code>
35-
</deckgo-highlight-code>
36-
</TabPanel>
37-
))}
38+
{examples.map(({ fileName, content }) => (
39+
<TabPanel key={fileName}>
40+
<deckgo-highlight-code theme="cobalt">
41+
<code slot="code">{content}</code>
42+
</deckgo-highlight-code>
43+
</TabPanel>
44+
))}
45+
</Collapsible>
3846
</Tabs>
3947
);
4048
})}

‎src/components/Sidebar.js‎

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Fragment, useState } from 'react';
22
import { Link } from 'gatsby';
3-
import { IoIosArrowDown, IoIosArrowForward } from 'react-icons/io';
3+
import Collapsible from './Collapsible';
44

55
/**
66
* Interactive Sidebar with toggleable categories.
@@ -23,50 +23,45 @@ const Sidebar = ({ categories = [], currentPathname }) => {
2323
<nav className="sidebar">
2424
{categories.map(({ categoryName, entries }) => (
2525
<Fragment key={categoryName}>
26-
<button
27-
onClick={() =>
26+
<Collapsible
27+
className="sidebar-category"
28+
openedClassName="sidebar-category"
29+
transitionTime={150}
30+
transitionCloseTime={50}
31+
trigger={categoryName}
32+
triggerTagName="div"
33+
open={selectedCategory === categoryName}
34+
onTriggerOpening={() =>
35+
selectCategory(
36+
selectedCategory === categoryName ? null : categoryName
37+
)
38+
}
39+
onTriggerClosing={() =>
2840
selectCategory(
2941
selectedCategory === categoryName ? null : categoryName
3042
)
3143
}
32-
className="sidebar-category"
33-
>
34-
{categoryName}
35-
<IoIosArrowDown
36-
className="arrow"
37-
style={{
38-
display: selectedCategory === categoryName ? 'block' : 'none',
39-
}}
40-
/>
41-
<IoIosArrowForward
42-
className="arrow"
43-
style={{
44-
display: selectedCategory === categoryName ? 'none' : 'block',
45-
}}
46-
/>
47-
</button>
48-
<ul
49-
id={categoryName}
50-
name="Category"
51-
className="list-unstyled components show"
52-
style={{
53-
display: selectedCategory === categoryName ? 'block' : 'none',
54-
}}
5544
>
56-
{entries.map((element) => (
57-
<li
58-
key={element.node.frontmatter.title}
59-
className="sidebar-element"
60-
>
61-
<Link
62-
to={`/integrations/${element.node.frontmatter.path}`}
63-
activeClassName="active-Link"
45+
<ul
46+
id={categoryName}
47+
name="Category"
48+
className="list-unstyled components show"
49+
>
50+
{entries.map((element) => (
51+
<li
52+
key={element.node.frontmatter.title}
53+
className="sidebar-element"
6454
>
65-
{element.node.frontmatter.title}
66-
</Link>
67-
</li>
68-
))}
69-
</ul>
55+
<Link
56+
to={`/integrations/${element.node.frontmatter.path}`}
57+
activeClassName="active-Link"
58+
>
59+
{element.node.frontmatter.title}
60+
</Link>
61+
</li>
62+
))}
63+
</ul>
64+
</Collapsible>
7065
</Fragment>
7166
))}
7267
</nav>

‎src/scss/components/_collapsible.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.Collapsible .Collapsible__trigger {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
cursor: pointer !important;
6+
}
7+
8+
.Collapsible__trigger.is-open {
9+
.arrow-down {
10+
display: none;
11+
}
12+
.arrow-up {
13+
display: block;
14+
}
15+
}
16+
17+
.Collapsible__trigger.is-closed {
18+
.arrow-down {
19+
display: block;
20+
}
21+
.arrow-up {
22+
display: none;
23+
}
24+
}

‎src/scss/components/_sidebar.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ a {
6262
}
6363
}
6464
ul {
65-
display: none;
65+
margin-top: 20px;
6666
li {
6767
a {
6868
text-align: left;
@@ -89,13 +89,12 @@ a {
8989
text-align: left;
9090
}
9191
.sidebar-category:hover {
92-
cursor: pointer;
9392
box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
9493
}
9594
.sidebar-element {
9695
font-size: 1rem;
9796
a {
98-
text-indent: 30px;
97+
text-indent: 16px;
9998
}
10099
}
101100
}
@@ -123,4 +122,4 @@ button {
123122

124123
*:focus {
125124
outline: 0 !important;
126-
}
125+
}

‎src/scss/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
@import 'libraries/hamburgers/hamburgers';
4444

4545
// Components
46+
@import 'components/collapsible';
4647
@import 'components/page';
4748
@import 'components/header';
4849
@import 'components/footer';

0 commit comments

Comments
 (0)