Skip to content

Commit 7d16507

Browse files
h-enkh-enk
authored
Merge pull request #243 from h-enk/collapsible-sidebar
✨ Adds collapsible sidebar as an option
2 parents de94e5a + 0bb5c42 commit 7d16507

File tree

8 files changed

+145
-14
lines changed

8 files changed

+145
-14
lines changed

‎assets/scss/common/_dark.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,10 @@ body.dark .page-links a {
9898
color: $body-color-dark;
9999
}
100100

101+
body.dark .btn-toggle-nav a {
102+
color: $body-color-dark;
103+
}
104+
101105
body.dark .showcase-meta a {
102106
color: $body-color-dark;
103107
}
@@ -114,6 +118,43 @@ body.dark .page-links a:hover {
114118
color: $link-color-dark;
115119
}
116120

121+
body.dark .btn-toggle {
122+
color: $body-color-dark;
123+
background-color: transparent;
124+
border: 0;
125+
}
126+
127+
body.dark .btn-toggle:hover,
128+
body.dark .btn-toggle:focus {
129+
color: $body-color-dark;
130+
}
131+
132+
body.dark .btn-toggle::before {
133+
width: 1.25em;
134+
line-height: 0;
135+
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
136+
transition: transform 0.35s ease;
137+
transform-origin: 0.5em 50%;
138+
margin-bottom: 0.125rem;
139+
}
140+
141+
body.dark .btn-toggle[aria-expanded="true"] {
142+
color: $body-color-dark;
143+
}
144+
145+
body.dark .btn-toggle[aria-expanded="true"]::before {
146+
transform: rotate(90deg);
147+
}
148+
149+
body.dark .btn-toggle-nav a:hover,
150+
body.dark .btn-toggle-nav a:focus {
151+
color: $link-color-dark;
152+
}
153+
154+
body.dark .btn-toggle-nav a.active {
155+
color: $link-color-dark;
156+
}
157+
117158
body.dark .navbar-light .navbar-text a {
118159
color: $navbar-dark-active-color;
119160
}

‎assets/scss/components/_buttons.scss‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,3 +89,62 @@ body.dark .toggle-dark {
8989
display: block;
9090
color: $pink-500;
9191
}
92+
93+
.collapsible-sidebar {
94+
margin: 2.125rem 0;
95+
}
96+
97+
.btn-toggle {
98+
display: inline-flex;
99+
align-items: center;
100+
padding: 0.25rem 0.5rem 0.25rem 0;
101+
font-weight: $headings-font-weight;
102+
font-size: $font-size-base;
103+
text-transform: uppercase;
104+
color: $body-color;
105+
background-color: transparent;
106+
border: 0;
107+
}
108+
109+
.btn-toggle:hover,
110+
.btn-toggle:focus {
111+
color: $body-color;
112+
background-color: transparent;
113+
outline: 0;
114+
box-shadow: none;
115+
}
116+
117+
.btn-toggle::before {
118+
width: 1.25em;
119+
line-height: 0;
120+
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
121+
transition: transform 0.35s ease;
122+
transform-origin: 0.5em 50%;
123+
margin-bottom: 0.125rem;
124+
}
125+
126+
.btn-toggle[aria-expanded="true"] {
127+
color: $body-color;
128+
}
129+
130+
.btn-toggle[aria-expanded="true"]::before {
131+
transform: rotate(90deg);
132+
}
133+
134+
.btn-toggle-nav a {
135+
display: inline-flex;
136+
padding: 0.1875rem 0.5rem;
137+
margin-top: 0.125rem;
138+
margin-left: 1.25rem;
139+
text-decoration: none;
140+
}
141+
142+
.btn-toggle-nav a:hover,
143+
.btn-toggle-nav a:focus {
144+
background-color: transparent;
145+
color: $link-color;
146+
}
147+
148+
.btn-toggle-nav a.active {
149+
color: $link-color;
150+
}

‎config/_default/params.toml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ editPage = false
5252
instantPage = true
5353
flexSearch = true
5454
darkMode = true
55-
bootStrapJs = false
55+
bootStrapJs = true
5656
breadCrumb = false
5757
highLight = true
5858
kaTex = false
59+
collapsibleSidebar = false

‎content/docs/help/how-to-update.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ weight: 610
1313
toc: true
1414
---
1515

16-
{{< alert icon="💡" text="Learn more about <a href=\"https://docs.npmjs.com/about-semantic-versioning\">semantic versioning</a> and <a href=\"https://docs.npmjs.com/cli/v6/using-npm/semver#advanced-range-syntax\">advanced range syntax</a>." >}}
16+
{{< alert icon="💡" text="Learn more about <a href=\"https://docs.npmjs.com/about-semantic-versioning\">semantic versioning</a> and <a href=\"https://docs.npmjs.com/cli/v6/using-npm/semver#advanced-range-syntax\">advanced range syntax</a>." />}}
1717

1818
## Check for outdated packages
1919

‎content/docs/prologue/commands.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ weight: 130
1313
toc: true
1414
---
1515

16-
{{< alert icon="💡" text="You can change the commands in the scripts section of `./package.json`." >}}
16+
{{< alert icon="💡" text="You can change the commands in the scripts section of `./package.json`." />}}
1717

1818
## create
1919

‎content/docs/prologue/introduction.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ There are two main ways to get started with Doks:
1919

2020
### Tutorial
2121

22-
{{< alert icon="👉" text="The Tutorial is intended for novice to intermediate users." >}}
22+
{{< alert icon="👉" text="The Tutorial is intended for novice to intermediate users." />}}
2323

2424
Step-by-step instructions on how to start a new Doks project. [Tutorial →](https://getdoks.org/tutorial/introduction/)
2525

2626
### Quick Start
2727

28-
{{< alert icon="👉" text="The Quick Start is intended for intermediate to advanced users." >}}
28+
{{< alert icon="👉" text="The Quick Start is intended for intermediate to advanced users." />}}
2929

3030
One page summary of how to start a new Doks project. [Quick Start →]({{< relref "quick-start" >}})
3131

‎layouts/docs/single.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,11 @@ <h1>{{ .Title }}</h1>
3030
{{ if .Site.Params.editPage -}}
3131
{{ partial "main/edit-page.html" . }}
3232
{{ end -}}
33-
{{ partial "main/docs-navigation.html" . }}
33+
{{ if not .Site.Params.options.collapsibleSidebar -}}
34+
{{ partial "main/docs-navigation.html" . }}
35+
{{ else -}}
36+
<div class="my-n3"></div>
37+
{{ end -}}
3438
</main>
3539
</div>
3640
{{ end }}

‎layouts/partials/sidebar/docs-menu.html‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,39 @@
1-
{{ $currentPage := . -}}
2-
{{ range .Site.Menus.docs -}}
3-
<h3>{{ .Name }}</h3>
4-
{{ if .HasChildren -}}
5-
<ul class="list-unstyled">
6-
{{ range .Children -}}
1+
{{ if .Site.Params.options.collapsibleSidebar -}}
2+
<ul class="list-unstyled collapsible-sidebar">
3+
{{ $currentPage := . -}}
4+
{{ range $index, $value := .Site.Menus.docs -}}
5+
<li class="mb-1">
6+
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#{{ .Identifier }}" aria-expanded="{{ if not $index }}true{{ else }}false{{ end }}">
7+
{{ .Name }}
8+
</button>
9+
{{ if .HasChildren -}}
710
{{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
811
{{- $active = or $active (eq $currentPage.Section .Identifier) -}}
9-
<li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
10-
{{ end -}}
12+
<div class="collapse{{ if $active }} show{{ end }}" id="{{ .Identifier }}">
13+
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
14+
{{ range .Children -}}
15+
{{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
16+
{{- $active = or $active (eq $currentPage.Section .Identifier) -}}
17+
<li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
18+
{{ end -}}
19+
</ul>
20+
</div>
21+
{{ end -}}
22+
</li>
23+
{{ end -}}
1124
</ul>
25+
{{ else -}}
26+
{{ $currentPage := . -}}
27+
{{ range .Site.Menus.docs -}}
28+
<h3>{{ .Name }}</h3>
29+
{{ if .HasChildren -}}
30+
<ul class="list-unstyled">
31+
{{ range .Children -}}
32+
{{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
33+
{{- $active = or $active (eq $currentPage.Section .Identifier) -}}
34+
<li><a class="docs-link{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
35+
{{ end -}}
36+
</ul>
37+
{{ end -}}
1238
{{ end -}}
1339
{{ end -}}

0 commit comments

Comments
 (0)