Merge pull request #243 from h-enk/collapsible-sidebar

✨ Adds collapsible sidebar as an option

assets/scss/common/_dark.scss

@@ -98,6 +98,10 @@ body.dark .page-links a {
   color: $body-color-dark;
 }
 
+body.dark .btn-toggle-nav a {
+  color: $body-color-dark;
+}
+
 body.dark .showcase-meta a {
   color: $body-color-dark;
 }
@@ -114,6 +118,43 @@ body.dark .page-links a:hover {
   color: $link-color-dark;
 }
 
+body.dark .btn-toggle {
+  color: $body-color-dark;
+  background-color: transparent;
+  border: 0;
+}
+
+body.dark .btn-toggle:hover,
+body.dark .btn-toggle:focus {
+  color: $body-color-dark;
+}
+
+body.dark .btn-toggle::before {
+  width: 1.25em;
+  line-height: 0;
+  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");
+  transition: transform 0.35s ease;
+  transform-origin: 0.5em 50%;
+  margin-bottom: 0.125rem;
+}
+
+body.dark .btn-toggle[aria-expanded="true"] {
+  color: $body-color-dark;
+}
+
+body.dark .btn-toggle[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+body.dark .btn-toggle-nav a:hover,
+body.dark .btn-toggle-nav a:focus {
+  color: $link-color-dark;
+}
+
+body.dark .btn-toggle-nav a.active {
+  color: $link-color-dark;
+}
+
 body.dark .navbar-light .navbar-text a {
   color: $navbar-dark-active-color;
 }

assets/scss/components/_buttons.scss

@@ -89,3 +89,62 @@ body.dark .toggle-dark {
   display: block;
   color: $pink-500;
 }
+
+.collapsible-sidebar {
+  margin: 2.125rem 0;
+}
+
+.btn-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem 0.25rem 0;
+  font-weight: $headings-font-weight;
+  font-size: $font-size-base;
+  text-transform: uppercase;
+  color: $body-color;
+  background-color: transparent;
+  border: 0;
+}
+
+.btn-toggle:hover,
+.btn-toggle:focus {
+  color: $body-color;
+  background-color: transparent;
+  outline: 0;
+  box-shadow: none;
+}
+
+.btn-toggle::before {
+  width: 1.25em;
+  line-height: 0;
+  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");
+  transition: transform 0.35s ease;
+  transform-origin: 0.5em 50%;
+  margin-bottom: 0.125rem;
+}
+
+.btn-toggle[aria-expanded="true"] {
+  color: $body-color;
+}
+
+.btn-toggle[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+.btn-toggle-nav a {
+  display: inline-flex;
+  padding: 0.1875rem 0.5rem;
+  margin-top: 0.125rem;
+  margin-left: 1.25rem;
+  text-decoration: none;
+}
+
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+  background-color: transparent;
+  color: $link-color;
+}
+
+.btn-toggle-nav a.active {
+  color: $link-color;
+}

config/_default/params.toml

@@ -52,7 +52,8 @@ editPage = false
   instantPage = true
   flexSearch = true
   darkMode = true
-  bootStrapJs = false
+  bootStrapJs = true
   breadCrumb = false
   highLight = true
   kaTex = false
+  collapsibleSidebar = false

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

@@ -13,7 +13,7 @@ weight: 610
 toc: true
 ---
 
-{{< 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>." >}}
+{{< 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>." />}}
 
 ## Check for outdated packages
 

content/docs/prologue/commands.md

@@ -13,7 +13,7 @@ weight: 130
 toc: true
 ---
 
-{{< alert icon="💡" text="You can change the commands in the scripts section of `./package.json`." >}}
+{{< alert icon="💡" text="You can change the commands in the scripts section of `./package.json`." />}}
 
 ## create
 

content/docs/prologue/introduction.md

@@ -19,13 +19,13 @@ There are two main ways to get started with Doks:
 
 ### Tutorial
 
-{{< alert icon="👉" text="The Tutorial is intended for novice to intermediate users." >}}
+{{< alert icon="👉" text="The Tutorial is intended for novice to intermediate users." />}}
 
 Step-by-step instructions on how to start a new Doks project. [Tutorial →](https://getdoks.org/tutorial/introduction/)
 
 ### Quick Start
 
-{{< alert icon="👉" text="The Quick Start is intended for intermediate to advanced users." >}}
+{{< alert icon="👉" text="The Quick Start is intended for intermediate to advanced users." />}}
 
 One page summary of how to start a new Doks project. [Quick Start →]({{< relref "quick-start" >}})
 

layouts/docs/single.html

@@ -30,7 +30,11 @@
 			{{ if .Site.Params.editPage -}}
 				{{ partial "main/edit-page.html" . }}
 			{{ end -}}
+			{{ if not .Site.Params.options.collapsibleSidebar -}}
 				{{ partial "main/docs-navigation.html" . }}
+			{{ else -}}
+				<div class="my-n3"></div>
+			{{ end -}}
 		</main>
 	</div>
 {{ end }}

layouts/partials/sidebar/docs-menu.html

@@ -1,3 +1,28 @@
+{{ if .Site.Params.options.collapsibleSidebar -}}
+  <ul class="list-unstyled collapsible-sidebar">
+  {{ $currentPage := . -}}
+  {{ range $index, $value := .Site.Menus.docs -}}
+    <li class="mb-1">
+      <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 }}">
+        {{ .Name }}
+      </button>
+      {{ if .HasChildren -}}
+      {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+      {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+      <div class="collapse{{ if $active }} show{{ end }}" id="{{ .Identifier }}">
+        <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+        {{ range .Children -}}
+          {{- $active := or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) -}}
+          {{- $active = or $active (eq $currentPage.Section .Identifier) -}}
+          <li><a class="docs-link rounded{{ if $active }} active{{ end }}" href="{{ .URL | relURL }}">{{ .Name }}</a></li>
+        {{ end -}}
+        </ul>
+      </div>
+      {{ end -}}
+    </li>
+  {{ end -}}
+  </ul>
+{{ else -}}
   {{ $currentPage := . -}}
   {{ range .Site.Menus.docs -}}
     <h3>{{ .Name }}</h3>
@@ -11,3 +36,4 @@
     </ul>
     {{ end -}}
   {{ end -}}
+{{ end -}}