Skip to content

Commit c960922

Browse files
lamATnginxlamATnginx
committed
added lines for the sidebar nav
1 parent e7a48f6 commit c960922

File tree

3 files changed

+133
-10
lines changed

3 files changed

+133
-10
lines changed

‎assets/css/v2/style.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,6 +318,7 @@ nav {
318318
}
319319

320320
.product-selector {
321+
display: none;
321322
position: absolute;
322323
top: 0;
323324
min-width: 80%;
@@ -349,6 +350,7 @@ nav {
349350
.sidebar .sidebar-navigation {
350351
width: 100%;
351352
font-weight: 500;
353+
margin-left: 3rem;
352354
}
353355

354356
/* removes the built in ul padding/margin */
@@ -377,12 +379,47 @@ nav {
377379

378380
.sidebar .sidebar-navigation .collapsible-content {
379381
display: none;
382+
position: relative;
383+
}
384+
385+
.sidebar .sidebar-navigation .box.opened {
386+
display: none;
380387
}
381388

382389
.toggle-checkbox:checked ~ .collapsible-content {
383390
display: block;
384391
}
385392

393+
.toggle-checkbox:checked ~ .collapsible-header .box.expand {
394+
display: none;
395+
}
396+
397+
.toggle-checkbox:checked ~ .collapsible-header .box.opened {
398+
display: block;
399+
}
400+
401+
.toggle-checkbox:checked ~ .collapsible-content::before {
402+
content: '';
403+
position: absolute;
404+
border-left: black 1px solid;
405+
left: calc(0.1rem - 0.75rem);
406+
top: -1.5rem;
407+
height: calc(100% + 0.925rem );
408+
}
409+
410+
.toggle-checkbox:checked ~ .collapsible-content li {
411+
position: relative;
412+
}
413+
414+
.toggle-checkbox:checked ~ .collapsible-content li::after {
415+
content: '';
416+
position: absolute;
417+
border-top: black 1px solid;
418+
left: -1.65rem;
419+
width: 0.9rem;
420+
top: 0.6rem;
421+
}
422+
386423
.selected {
387424
font-weight: 800;
388425
}
@@ -391,6 +428,67 @@ nav {
391428
margin-top: 1rem;
392429
}
393430

431+
.sidebar .sidebar-navigation ul li .box-link {
432+
content: '';
433+
background-color: black;
434+
position: absolute;
435+
width: 0.1rem;
436+
height: 0.25rem;
437+
margin-top: 0.5rem;
438+
left: 0.75rem;
439+
}
440+
441+
.sidebar .sidebar-navigation ul li .box {
442+
content: '';
443+
position: absolute;
444+
width: 0.25rem;
445+
height: 0.25rem;
446+
margin-top: 0.5rem;
447+
left: 0.75rem;
448+
}
449+
450+
.sidebar .sidebar-navigation ul li .expand {
451+
background-color: black;
452+
}
453+
454+
.sidebar .sidebar-navigation ul li .opened {
455+
border: black 1px solid;
456+
}
457+
458+
.sidebar .sidebar-navigation ul li .current {
459+
background-color: var(--color-brand);
460+
z-index: 999;
461+
}
462+
463+
.sidebar .sidebar-navigation ul li .partial-box {
464+
margin-left: -1.5rem;
465+
}
466+
467+
.sidebar .sidebar-navigation ul li .partial {
468+
left: -0.8125rem;
469+
}
470+
471+
/* First Sidebar Nav Vertical Line */
472+
.sidebar .sidebar-navigation .parent-collapsible-content::before{
473+
content: '';
474+
position: absolute;
475+
border-left: black 1px solid;
476+
left: 0;
477+
bottom: 1.55rem;
478+
height: calc(100% - 5.65rem);
479+
}
480+
481+
/* First Sidebar Nav Horizontal Lines */
482+
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::before,
483+
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::after {
484+
content: '';
485+
position: absolute;
486+
border-top: black 1px solid;
487+
left: 0;
488+
margin-top: 0.6rem;
489+
width: 0.8rem;
490+
}
491+
394492
.row {
395493
display: flex;
396494
flex-wrap: nowrap;

‎layouts/partials/sidebar-list-pages.html‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
1+
{{ $currentUrl := .currentUrl }}
2+
{{ $context := .context }}
3+
14
<ul class="collapsible-content">
2-
{{ range .Pages.ByWeight }}
5+
{{ range $context.Pages.ByWeight }}
36
<li>
47
{{ if eq .Kind "section" }}
58
<input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
69
<label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
10+
{{ if .Pages }}
11+
<span class="box expand partial-box"></span>
12+
<span class="box opened partial-box"></span>
13+
{{ end }}
714
{{ .Title }}
815
</label>
9-
{{ partial "sidebar-list-pages.html" . }}
16+
{{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $currentUrl) }}
1017
{{ else if eq .Kind "page" }}
18+
{{ if eq $currentUrl .Permalink }}
19+
<span class="box current partial"></span>
20+
{{ else }}
21+
<span class="box-link partial"></span>
22+
{{ end }}
1123
<a href="{{ .Permalink }}">{{ .Title }} </a>
1224
{{ end }}
1325
</li>
1426
{{ end }}
15-
</ul>
27+
</ul>

‎layouts/partials/sidebar-v2.html‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,27 @@
4545
{{ end }}
4646
</div>
4747
<div class="sidebar-navigation">
48-
<ul>
48+
<ul class="parent-collapsible-content">
4949
{{ range .FirstSection.Pages.ByWeight }}
50-
<li>
51-
<input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
52-
<label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
53-
{{ .Title }}
54-
</label>
55-
{{ partial "sidebar-list-pages.html" . }}
50+
<li class="parent-collapsible-content-item">
51+
{{ if eq .Kind "section" }}
52+
<input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
53+
<label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
54+
{{ if .Pages }}
55+
<span class="box expand"></span>
56+
<span class="box opened"></span>
57+
{{ end }}
58+
{{ .Title }}
59+
</label>
60+
{{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $.Permalink) }}
61+
{{ else if eq .Kind "page" }}
62+
{{ if eq $.Permalink .Permalink }}
63+
<span class="box current"></span>
64+
{{ else }}
65+
<span class="box-link"></span>
66+
{{ end }}
67+
<a href="{{ .Permalink }}">{{ .Title }} </a>
68+
{{ end }}
5669
</li>
5770
{{ end }}
5871
</ul>

0 commit comments

Comments
 (0)