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

Commit efdb192

Browse files
author
dpatanin
committed
make sidebar menus toggable
1 parent 371a06b commit efdb192

2 files changed

Lines changed: 60 additions & 143 deletions

File tree

‎src/components/Sidebar.js‎

Lines changed: 57 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,49 @@
11
import React, { Fragment } from 'react';
22
import { Link } from 'gatsby';
33

4+
// Toggles sidebar menus, only one may be open at a time
5+
function toggleMenu(id) {
6+
const element = document.getElementById(id);
7+
const scanners = document.getElementById('Scanners');
8+
const persistenceProviders = document.getElementById('Persistence Providers');
9+
const hooks = document.getElementById('Hooks');
10+
11+
switch (element) {
12+
case scanners:
13+
persistenceProviders.style.display = 'none';
14+
hooks.style.display = 'none';
15+
16+
element.style.display === 'block'
17+
? (element.style.display = 'none')
18+
: (element.style.display = 'block');
19+
break;
20+
21+
case persistenceProviders:
22+
scanners.style.display = 'none';
23+
hooks.style.display = 'none';
24+
25+
element.style.display === 'block'
26+
? (element.style.display = 'none')
27+
: (element.style.display = 'block');
28+
break;
29+
30+
case hooks:
31+
scanners.style.display = 'none';
32+
persistenceProviders.style.display = 'none';
33+
34+
element.style.display === 'block'
35+
? (element.style.display = 'none')
36+
: (element.style.display = 'block');
37+
break;
38+
39+
default:
40+
scanners.style.display = 'none';
41+
persistenceProviders.style.display = 'none';
42+
hooks.style.display = 'none';
43+
break;
44+
}
45+
}
46+
447
// Determine the naming of Sidebar categories
548
function getCategoryTitle(category) {
649
let categoryTitle = '';
@@ -11,11 +54,13 @@ function getCategoryTitle(category) {
1154
break;
1255

1356
case 'hook':
14-
category[0].node.frontmatter.type === 'persistenceProvider' ? categoryTitle = 'Persistence Providers' : categoryTitle = 'Hooks';
57+
category[0].node.frontmatter.type === 'persistenceProvider'
58+
? (categoryTitle = 'Persistence Providers')
59+
: (categoryTitle = 'Hooks');
1560
break;
1661

1762
default:
18-
categoryTitle = 'Unknown Category';
63+
categoryTitle = 'Unknown Category';
1964
break;
2065
}
2166

@@ -27,8 +72,16 @@ const Sidebar = (props) => {
2772
<nav className="sidebar">
2873
{props.dataArray.map((category, index) => (
2974
<Fragment key={index}>
30-
<h1 className="sidebar-header">{getCategoryTitle(category)}</h1>
31-
<ul className="list-unstyled components">
75+
<h1
76+
onClick={() => toggleMenu(getCategoryTitle(category))}
77+
className="sidebar-header"
78+
>
79+
{getCategoryTitle(category)}
80+
</h1>
81+
<ul
82+
id={getCategoryTitle(category)}
83+
className="list-unstyled components show"
84+
>
3285
{category.map((element) => (
3386
<li key={element.node.frontmatter.title}>
3487
<Link

‎src/scss/components/_sidebar.scss‎

Lines changed: 3 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -30,44 +30,15 @@ a {
3030
}
3131
}
3232
.sidebar-wrapper{
33-
display: inline-flex;
34-
}
35-
.navbar {
36-
padding: 15px 10px;
37-
background: $white;
38-
border: none;
39-
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
40-
border-radius: 0;
41-
margin-bottom: 40px;
42-
//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
43-
box-shadow: 1px 1px 3px $black;
44-
}
45-
.navbar-btn {
46-
//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
47-
box-shadow: none;
48-
outline: none !important;
49-
border: none;
50-
}
51-
.line {
52-
width: 100%;
53-
height: 1px;
54-
border-bottom: 1px dashed #ddd;
55-
margin: 40px 0;
56-
}
57-
i {
58-
display: inline-block;
59-
}
60-
span {
61-
display: inline-block;
33+
display: flex;
6234
}
6335
.sidebar {
6436
@include media-breakpoint-down(sm) {
6537
display: none;
6638
}
67-
width: 150px;
39+
width: 250px;
6840
background: $secureCodeBlue;
6941
height: 100vh;
70-
align-self: flex-start;
7142
position: sticky;
7243
top: 50px;
7344
z-index: 9;
@@ -91,34 +62,9 @@ span {
9162
display: block;
9263
}
9364
}
94-
.CTAs {
95-
display: none;
96-
}
97-
ul {
98-
li a {
99-
padding: 20px 10px;
100-
text-align: center;
101-
font-size: 0.85em;
102-
i {
103-
margin-right: 0;
104-
display: block;
105-
font-size: 1.8em;
106-
margin-bottom: 5px;
107-
}
108-
}
109-
ul a {
110-
padding: 10px !important;
111-
}
112-
}
113-
.dropdown-toggle::after {
114-
top: auto;
115-
bottom: 10px;
116-
right: 50%;
117-
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
118-
transform: translateX(50%);
119-
}
12065
}
12166
ul {
67+
display: none;
12268
li {
12369
a {
12470
text-align: left;
@@ -148,92 +94,10 @@ span {
14894
font-size: 1.3rem;
14995
}
15096
}
151-
a[aria-expanded="true"] {
152-
color: $white;
153-
background: $highlight;
154-
}
155-
a[data-toggle="collapse"] {
156-
position: relative;
157-
}
158-
.dropdown-toggle::after {
159-
display: block;
160-
position: absolute;
161-
top: 50%;
162-
right: 20px;
163-
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
164-
transform: translateY(-50%);
165-
}
166-
ul {
167-
&.CTAs {
168-
padding: 20px;
169-
a {
170-
text-align: center;
171-
font-size: 0.9em !important;
172-
display: block;
173-
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
174-
border-radius: 5px;
175-
margin-bottom: 5px;
176-
}
177-
}
178-
ul a {
179-
font-size: 0.9em !important;
180-
padding-left: 30px !important;
181-
background: $highlight;
182-
}
183-
}
18497
#content {
18598
width: auto;
18699
padding: 20px;
187100
min-height: 100vh;
188101
//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)
189102
transition: all 0.3s;
190-
}
191-
@media(max-width: 768px) {
192-
#sidebar {
193-
min-width: 80px;
194-
max-width: 80px;
195-
text-align: center;
196-
margin-left: -80px !important;
197-
margin-left: 0;
198-
&.active {
199-
margin-left: 0 !important;
200-
}
201-
.sidebar-header {
202-
h3 {
203-
display: none;
204-
}
205-
strong {
206-
display: block;
207-
}
208-
}
209-
.CTAs {
210-
display: none;
211-
}
212-
ul {
213-
li a {
214-
padding: 20px 10px;
215-
span {
216-
font-size: 0.85em;
217-
}
218-
i {
219-
margin-right: 0;
220-
display: block;
221-
font-size: 1.3em;
222-
}
223-
}
224-
ul a {
225-
padding: 10px !important;
226-
}
227-
}
228-
}
229-
.dropdown-toggle::after {
230-
top: auto;
231-
bottom: 10px;
232-
right: 50%;
233-
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
234-
transform: translateX(50%);
235-
}
236-
#sidebarCollapse span {
237-
display: none;
238-
}
239103
}

0 commit comments

Comments
 (0)