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

Commit 1db2cee

Browse files
author
dpatanin
committed
add Sidebar navigation to scanner pages
1 parent 389c623 commit 1db2cee

3 files changed

Lines changed: 300 additions & 20 deletions

File tree

‎src/scss/components/_sidebar.scss‎

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
//@extend-elements
2+
//original selectors
3+
//a, a:hover, a:focus
4+
%extend_1 {
5+
color: inherit;
6+
text-decoration: none;
7+
//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)
8+
transition: all 0.3s;
9+
}
10+
11+
12+
body {
13+
font-family: $font-family-base;
14+
background: #fafafa;
15+
}
16+
p {
17+
font-family: $font-family-base;
18+
font-size: 1.1em;
19+
font-weight: 300;
20+
line-height: 1.7em;
21+
color: #999;
22+
}
23+
a {
24+
@extend %extend_1;
25+
&:hover {
26+
@extend %extend_1;
27+
}
28+
&:focus {
29+
@extend %extend_1;
30+
}
31+
&.download {
32+
background: $white;
33+
color: #7386d5;
34+
}
35+
&.article {
36+
background: #6d7fcc !important;
37+
color: $white !important;
38+
&:hover {
39+
background: #6d7fcc !important;
40+
color: $white !important;
41+
}
42+
}
43+
}
44+
.sidebar-wrapper{
45+
display: flex;
46+
}
47+
.navbar {
48+
padding: 15px 10px;
49+
background: $white;
50+
border: none;
51+
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
52+
border-radius: 0;
53+
margin-bottom: 40px;
54+
//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)
55+
box-shadow: 1px 1px 3px $black;
56+
}
57+
.navbar-btn {
58+
//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)
59+
box-shadow: none;
60+
outline: none !important;
61+
border: none;
62+
}
63+
.line {
64+
width: 100%;
65+
height: 1px;
66+
border-bottom: 1px dashed #ddd;
67+
margin: 40px 0;
68+
}
69+
i {
70+
display: inline-block;
71+
}
72+
span {
73+
display: inline-block;
74+
}
75+
#sidebar {
76+
min-width: 250px;
77+
max-width: 250px;
78+
background: #7386d5;
79+
color: $white;
80+
//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)
81+
transition: all 0.3s;
82+
&.active {
83+
min-width: 80px;
84+
max-width: 80px;
85+
text-align: center;
86+
.sidebar-header {
87+
h3 {
88+
display: none;
89+
}
90+
strong {
91+
display: block;
92+
}
93+
}
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+
}
120+
}
121+
ul {
122+
li {
123+
a {
124+
text-align: left;
125+
padding: 10px;
126+
font-size: 1.1em;
127+
display: block;
128+
&:hover {
129+
color: #7386d5;
130+
background: $white;
131+
}
132+
i {
133+
margin-right: 10px;
134+
}
135+
}
136+
&.active > a {
137+
color: $white;
138+
background: #6d7fcc;
139+
}
140+
}
141+
&.components {
142+
padding: 20px 0;
143+
border-bottom: 1px solid #47748b;
144+
}
145+
}
146+
.sidebar-header {
147+
padding: 20px;
148+
background: #6d7fcc;
149+
strong {
150+
display: none;
151+
font-size: 1.8em;
152+
}
153+
}
154+
}
155+
a[aria-expanded="true"] {
156+
color: $white;
157+
background: #6d7fcc;
158+
}
159+
a[data-toggle="collapse"] {
160+
position: relative;
161+
}
162+
.dropdown-toggle::after {
163+
display: block;
164+
position: absolute;
165+
top: 50%;
166+
right: 20px;
167+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
168+
transform: translateY(-50%);
169+
}
170+
ul {
171+
&.CTAs {
172+
padding: 20px;
173+
a {
174+
text-align: center;
175+
font-size: 0.9em !important;
176+
display: block;
177+
//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
178+
border-radius: 5px;
179+
margin-bottom: 5px;
180+
}
181+
}
182+
ul a {
183+
font-size: 0.9em !important;
184+
padding-left: 30px !important;
185+
background: #6d7fcc;
186+
}
187+
}
188+
#content {
189+
width: 100%;
190+
padding: 20px;
191+
min-height: 100vh;
192+
//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)
193+
transition: all 0.3s;
194+
}
195+
@media(max-width: 768px) {
196+
#sidebar {
197+
min-width: 80px;
198+
max-width: 80px;
199+
text-align: center;
200+
margin-left: -80px !important;
201+
margin-left: 0;
202+
&.active {
203+
margin-left: 0 !important;
204+
}
205+
.sidebar-header {
206+
h3 {
207+
display: none;
208+
}
209+
strong {
210+
display: block;
211+
}
212+
}
213+
.CTAs {
214+
display: none;
215+
}
216+
ul {
217+
li a {
218+
padding: 20px 10px;
219+
span {
220+
font-size: 0.85em;
221+
}
222+
i {
223+
margin-right: 0;
224+
display: block;
225+
font-size: 1.3em;
226+
}
227+
}
228+
ul a {
229+
padding: 10px !important;
230+
}
231+
}
232+
}
233+
.dropdown-toggle::after {
234+
top: auto;
235+
bottom: 10px;
236+
right: 50%;
237+
//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
238+
transform: translateX(50%);
239+
}
240+
#sidebarCollapse span {
241+
display: none;
242+
}
243+
}

‎src/scss/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
@import 'components/call';
6262
@import 'components/card';
6363
@import 'components/card-two';
64+
@import 'components/sidebar';
6465

6566
// Pages
6667
@import 'pages/home';

‎src/templates/scanner.js‎

Lines changed: 56 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,72 @@
11
import React from "react";
2-
import { graphql } from "gatsby";
2+
import { graphql, Link } from "gatsby";
33
import Layout from "../components/Layout";
44

55
const Scanner = ({ data }) => {
66
const { title } = data.markdownRemark.frontmatter;
77
const { html } = data.markdownRemark;
8+
const scanner = data.allMarkdownRemark.edges;
9+
810
return (
911
<Layout bodyClass="page-scanners">
10-
<div className="container pt-4 pt-md-10">
11-
<div className="row justify-content-start">
12-
<div className="col-12 col-md-8">
13-
<h1 className="title">{title}</h1>
14-
<div
15-
className="content"
16-
dangerouslySetInnerHTML={{ __html: html }}
17-
/>
12+
<div class="sidebar-wrapper">
13+
<nav id="sidebar">
14+
<div class="sidebar-header">
15+
<h3>Scanner</h3>
16+
<strong>Scanner</strong>
17+
</div>
18+
19+
<ul class="list-unstyled components">
20+
{scanner.map(scanner => (
21+
<li>
22+
<Link to={scanner.node.frontmatter.path}>{scanner.node.frontmatter.title}</Link>
23+
</li>
24+
))}
25+
</ul>
26+
</nav>
27+
28+
<div id="content">
29+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
30+
<div class="container-fluid">
31+
<h1 className="title">{title}</h1>
32+
<div
33+
className="content"
34+
dangerouslySetInnerHTML={{ __html: html }}
35+
/>
36+
</div>
37+
</nav>
38+
</div>
1839
</div>
19-
</div>
20-
</div>
2140
</Layout>
2241
);
2342
};
2443

2544
export const query = graphql`
26-
query($id: String!) {
27-
markdownRemark(id: { eq: $id }) {
28-
frontmatter {
29-
title
30-
}
31-
html
32-
}
33-
}
34-
`;
45+
query($id: String!) {
46+
markdownRemark(id: { eq: $id }) {
47+
frontmatter {
48+
title
49+
}
50+
html
51+
}
52+
allMarkdownRemark(
53+
filter: { frontmatter: { category: { eq: "scanner" } } }
54+
sort: { fields: [frontmatter___title], order: ASC }
55+
) {
56+
edges {
57+
node {
58+
html
59+
frontmatter {
60+
title
61+
path
62+
category
63+
usecase
64+
release
65+
}
66+
}
67+
}
68+
}
69+
}
70+
`;
3571

3672
export default Scanner;

0 commit comments

Comments
 (0)