Skip to content

Commit b374a6e

Browse files
lamATnginxlamATnginx
authored
Added scroller to sidebar (#128)
1 parent 89042fb commit b374a6e

File tree

2 files changed

+94
-42
lines changed

2 files changed

+94
-42
lines changed

‎assets/css/v2/style.css

Lines changed: 68 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,12 @@
2020
--color-footer-text: #E2E2E2;
2121
--color-product-title: #8D8D8D;
2222

23-
--sidebar-margin: 48px;
23+
--sidebar-margin: 24px;
2424
--sidebar-line-box-side-length: 8px;
2525
--sidebar-line-box-top: 6px;
2626
--sidebar-line-box-left: 12px;
2727
--sidebar-width: 24rem;
28+
--sidebar-line-width: 11.5px;
2829
--side-gutter-width: 20rem;
2930
--text-content-width-iphone-13: 30rem;
3031
--text-content-width-mbp-14: 40rem;
@@ -352,6 +353,7 @@ nav {
352353
width: 24rem;
353354
position: sticky;
354355
top: 0;
356+
height: 100vh;
355357
}
356358

357359
.sidebar .product-selector-button {
@@ -368,7 +370,7 @@ nav {
368370
}
369371

370372
.sidebar .product-selector-button .selector-icon {
371-
height:24px;
373+
height: 24px;
372374
width: 24px;
373375
}
374376

@@ -402,8 +404,19 @@ nav {
402404
font-size: 1rem;
403405
}
404406

405-
.sidebar .sidebar-navigation {
407+
/* Sidebar scroller */
408+
.sidebar .scrollbar-container {
406409
width: 100%;
410+
max-height: 100vh;
411+
overflow: hidden;
412+
scrollbar-gutter: stable;
413+
}
414+
415+
.sidebar .scrollbar-container:hover {
416+
overflow: auto;
417+
}
418+
419+
.sidebar .sidebar-navigation {
407420
margin-left: var(--sidebar-margin);
408421
}
409422

@@ -412,7 +425,6 @@ nav {
412425
margin-left: 0;
413426
padding-left: 0;
414427
list-style-type: none;
415-
padding-right: 1.5rem;
416428
}
417429

418430
.sidebar ul :not(.sidebar-navigation) ul {
@@ -437,10 +449,12 @@ nav {
437449
position: relative;
438450
}
439451

452+
.sidebar .sidebar-navigation .parent-box.opened,
440453
.sidebar .sidebar-navigation .box.opened {
441454
display: none;
442455
}
443456

457+
.toggle-checkbox:checked ~ .collapsible-header .parent-box.expand,
444458
.toggle-checkbox:checked ~ .collapsible-header .box.expand {
445459
display: none;
446460
}
@@ -449,6 +463,10 @@ nav {
449463
display: block;
450464
}
451465

466+
.toggle-checkbox:checked ~ .collapsible-header .parent-box.opened {
467+
display: inline-block;
468+
}
469+
452470
.toggle-checkbox:checked ~ .collapsible-header .box.opened {
453471
display: block;
454472
}
@@ -459,8 +477,8 @@ nav {
459477
position: absolute;
460478
border-left: black 1px solid;
461479
left: -8.5px;
462-
top: -21.5px;
463-
height: calc(100% + 12.5px);
480+
top: -22.5px;
481+
height: calc(100% + 13.5px);
464482
}
465483

466484
/* Every other Sidebar Partial Horizontal Lines */
@@ -473,7 +491,7 @@ nav {
473491
position: absolute;
474492
border-top: black 1px solid;
475493
left: -11.5px;
476-
width: 11.5px;
494+
width: var(--sidebar-line-width);
477495
top: 50%;
478496
}
479497

@@ -482,7 +500,7 @@ nav {
482500
position: absolute;
483501
border-top: black 1px solid;
484502
left: -12.5px;
485-
width: 11.5px;
503+
width: var(--sidebar-line-width);
486504
top: 50%;
487505
}
488506

@@ -491,7 +509,7 @@ nav {
491509
position: absolute;
492510
border-top: black 1px solid;
493511
left: -11.5px;
494-
width: 11.5px;
512+
width: var(--sidebar-line-width);
495513
top: 50%;
496514
}
497515

@@ -503,6 +521,16 @@ nav {
503521
margin-top: 16px;
504522
}
505523

524+
.sidebar .sidebar-navigation ul li .parent-box-link {
525+
content: '';
526+
background-color: black;
527+
position: absolute;
528+
width: 1px;
529+
height: var(--sidebar-line-box-side-length);
530+
margin-top: var(--sidebar-line-box-top);
531+
left: calc(0px - var(--sidebar-line-box-left));
532+
}
533+
506534
.sidebar .sidebar-navigation ul li .box-link {
507535
content: '';
508536
background-color: black;
@@ -513,6 +541,16 @@ nav {
513541
left: var(--sidebar-line-box-left);
514542
}
515543

544+
.sidebar .sidebar-navigation ul li .parent-box {
545+
content: '';
546+
display: inline-block;
547+
width: var(--sidebar-line-box-side-length);
548+
height: var(--sidebar-line-box-side-length);
549+
vertical-align: middle;
550+
margin-left: -12px;
551+
margin-top: -4px;
552+
}
553+
516554
.sidebar .sidebar-navigation ul li .box {
517555
content: '';
518556
position: absolute;
@@ -546,24 +584,36 @@ nav {
546584
}
547585

548586
/* First Sidebar Nav Vertical Line */
549-
.sidebar .sidebar-navigation .parent-collapsible-content::before{
587+
.sidebar .sidebar-navigation .parent-collapsible-content {
588+
position: relative;
589+
}
590+
591+
.sidebar .sidebar-navigation .parent-collapsible-content::before {
550592
content: '';
551593
position: absolute;
552594
border-left: black 1px solid;
553-
left: 0;
554-
bottom: 1.55rem;
555-
height: calc(100% - 5.65rem);
595+
left: -24px;
596+
top: 10px;
597+
height: calc(100% - 9px - 10px);
556598
}
557599

558600
/* First Sidebar Nav Horizontal Lines */
559-
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::before,
560-
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::after {
601+
.sidebar .sidebar-navigation .parent-collapsible-content .parent-box::before {
602+
content: '';
603+
display: block;
604+
border-top: black 1px solid;
605+
margin-left: -12px;
606+
margin-top: 50%;
607+
width: var(--sidebar-line-width);
608+
}
609+
610+
.parent-collapsible-content .parent-box-link::after {
561611
content: '';
562612
position: absolute;
563613
border-top: black 1px solid;
564-
left: 0;
565-
margin-top: 0.6rem;
566-
width: 0.75rem;
614+
left: -11.5px;
615+
width: var(--sidebar-line-width);
616+
top: 50%;
567617
}
568618

569619
.row {

‎layouts/partials/sidebar-v2.html

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -52,29 +52,31 @@
5252
</div>
5353
{{ end }}
5454
</div>
55-
<div class="sidebar-navigation">
56-
<ul class="parent-collapsible-content">
57-
{{ range .FirstSection.Pages.ByWeight }}
58-
<li class="parent-collapsible-content-item">
59-
{{ if eq .Kind "section" }}
60-
<input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
61-
<label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
62-
{{ if .Pages }}
63-
<span class="box expand"></span>
64-
<span class="box opened"></span>
55+
<div class="scrollbar-container">
56+
<div class="sidebar-navigation">
57+
<ul class="parent-collapsible-content">
58+
{{ range .FirstSection.Pages.ByWeight }}
59+
<li class="parent-collapsible-content-item">
60+
{{ if eq .Kind "section" }}
61+
<input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
62+
<label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
63+
{{ if .Pages }}
64+
<span class="parent-box expand"></span>
65+
<span class="parent-box opened"></span>
66+
{{ end }}
67+
{{ .Title }}
68+
</label>
69+
{{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $.Permalink) }}
70+
{{ else if eq .Kind "page" }}
71+
{{ if eq $.Permalink .Permalink }}
72+
<span class="parent-box current"></span>
73+
{{ else }}
74+
<span class="parent-box-link"></span>
6575
{{ end }}
66-
{{ .Title }}
67-
</label>
68-
{{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $.Permalink) }}
69-
{{ else if eq .Kind "page" }}
70-
{{ if eq $.Permalink .Permalink }}
71-
<span class="box current"></span>
72-
{{ else }}
73-
<span class="box-link"></span>
76+
<a href="{{ .Permalink }}" style="{{if eq $.Permalink .Permalink}}font-weight: bold;{{end}}">{{ .Title }} </a>
7477
{{ end }}
75-
<a href="{{ .Permalink }}" style="{{if eq $.Permalink .Permalink}}font-weight: bold;{{end}}">{{ .Title }} </a>
76-
{{ end }}
77-
</li>
78-
{{ end }}
79-
</ul>
80-
</div>
78+
</li>
79+
{{ end }}
80+
</ul>
81+
</div>
82+
</div>

0 commit comments

Comments
 (0)