Skip to content

Commit 27fe0a3

Browse files
lamATnginxlamATnginx
committed
fix: added scroller to sidebar
1 parent 04edd69 commit 27fe0a3

File tree

2 files changed

+92
-40
lines changed

2 files changed

+92
-40
lines changed

‎assets/css/v2/style.css

Lines changed: 66 additions & 16 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;
@@ -400,8 +401,19 @@ nav {
400401
font-size: 1rem;
401402
}
402403

403-
.sidebar .sidebar-navigation {
404+
/* Sidebar scroller */
405+
.sidebar .scrollbar-container {
404406
width: 100%;
407+
max-height: calc(100vh - 50px);
408+
overflow: hidden;
409+
}
410+
411+
.sidebar .scrollbar-container:hover {
412+
overflow: auto;
413+
}
414+
415+
416+
.sidebar .sidebar-navigation {
405417
margin-left: var(--sidebar-margin);
406418
}
407419

@@ -435,10 +447,12 @@ nav {
435447
position: relative;
436448
}
437449

450+
.sidebar .sidebar-navigation .parent-box.opened,
438451
.sidebar .sidebar-navigation .box.opened {
439452
display: none;
440453
}
441454

455+
.toggle-checkbox:checked ~ .collapsible-header .parent-box.expand,
442456
.toggle-checkbox:checked ~ .collapsible-header .box.expand {
443457
display: none;
444458
}
@@ -447,6 +461,10 @@ nav {
447461
display: block;
448462
}
449463

464+
.toggle-checkbox:checked ~ .collapsible-header .parent-box.opened {
465+
display: inline-block;
466+
}
467+
450468
.toggle-checkbox:checked ~ .collapsible-header .box.opened {
451469
display: block;
452470
}
@@ -457,8 +475,8 @@ nav {
457475
position: absolute;
458476
border-left: black 1px solid;
459477
left: -8.5px;
460-
top: -21.5px;
461-
height: calc(100% + 12.5px);
478+
top: -22.5px;
479+
height: calc(100% + 13.5px);
462480
}
463481

464482
/* Every other Sidebar Partial Horizontal Lines */
@@ -471,7 +489,7 @@ nav {
471489
position: absolute;
472490
border-top: black 1px solid;
473491
left: -11.5px;
474-
width: 11.5px;
492+
width: var(--sidebar-line-width);
475493
top: 50%;
476494
}
477495

@@ -480,7 +498,7 @@ nav {
480498
position: absolute;
481499
border-top: black 1px solid;
482500
left: -12.5px;
483-
width: 11.5px;
501+
width: var(--sidebar-line-width);
484502
top: 50%;
485503
}
486504

@@ -489,7 +507,7 @@ nav {
489507
position: absolute;
490508
border-top: black 1px solid;
491509
left: -11.5px;
492-
width: 11.5px;
510+
width: var(--sidebar-line-width);
493511
top: 50%;
494512
}
495513

@@ -501,6 +519,16 @@ nav {
501519
margin-top: 16px;
502520
}
503521

522+
.sidebar .sidebar-navigation ul li .parent-box-link {
523+
content: '';
524+
background-color: black;
525+
position: absolute;
526+
width: 1px;
527+
height: var(--sidebar-line-box-side-length);
528+
margin-top: var(--sidebar-line-box-top);
529+
left: calc(0px - var(--sidebar-line-box-left));
530+
}
531+
504532
.sidebar .sidebar-navigation ul li .box-link {
505533
content: '';
506534
background-color: black;
@@ -511,6 +539,16 @@ nav {
511539
left: var(--sidebar-line-box-left);
512540
}
513541

542+
.sidebar .sidebar-navigation ul li .parent-box {
543+
content: '';
544+
display: inline-block;
545+
width: var(--sidebar-line-box-side-length);
546+
height: var(--sidebar-line-box-side-length);
547+
vertical-align: middle;
548+
margin-left: -12px;
549+
margin-top: -4px;
550+
}
551+
514552
.sidebar .sidebar-navigation ul li .box {
515553
content: '';
516554
position: absolute;
@@ -544,24 +582,36 @@ nav {
544582
}
545583

546584
/* First Sidebar Nav Vertical Line */
547-
.sidebar .sidebar-navigation .parent-collapsible-content::before{
585+
.sidebar .sidebar-navigation .parent-collapsible-content {
586+
position: relative;
587+
}
588+
589+
.sidebar .sidebar-navigation .parent-collapsible-content::before {
548590
content: '';
549591
position: absolute;
550592
border-left: black 1px solid;
551-
left: 0;
552-
bottom: 1.55rem;
553-
height: calc(100% - 5.65rem);
593+
left: -24px;
594+
top: 10px;
595+
height: calc(100% - 9px - 10px);
554596
}
555597

556598
/* First Sidebar Nav Horizontal Lines */
557-
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::before,
558-
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::after {
599+
.sidebar .sidebar-navigation .parent-collapsible-content .parent-box::before {
600+
content: '';
601+
display: block;
602+
border-top: black 1px solid;
603+
margin-left: -12px;
604+
margin-top: 50%;
605+
width: var(--sidebar-line-width);
606+
}
607+
608+
.parent-collapsible-content .parent-box-link::after {
559609
content: '';
560610
position: absolute;
561611
border-top: black 1px solid;
562-
left: 0;
563-
margin-top: 0.6rem;
564-
width: 0.75rem;
612+
left: -11.5px;
613+
width: var(--sidebar-line-width);
614+
top: 50%;
565615
}
566616

567617
.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)