diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss index 5f1fe08..44deb6c 100644 --- a/assets/scss/common/_dark.scss +++ b/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; } diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss index f20a0d2..d8890ef 100644 --- a/assets/scss/components/_buttons.scss +++ b/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; +} diff --git a/config/_default/params.toml b/config/_default/params.toml index ed44ae8..f97b6d0 100644 --- a/config/_default/params.toml +++ b/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 diff --git a/content/docs/help/how-to-update.md b/content/docs/help/how-to-update.md index 43cb1f4..f9bb36b 100644 --- a/content/docs/help/how-to-update.md +++ b/content/docs/help/how-to-update.md @@ -13,7 +13,7 @@ weight: 610 toc: true --- -{{< alert icon="💡" text="Learn more about semantic versioning and advanced range syntax." >}} +{{< alert icon="💡" text="Learn more about semantic versioning and advanced range syntax." />}} ## Check for outdated packages diff --git a/content/docs/prologue/commands.md b/content/docs/prologue/commands.md index b7922ee..e7101f0 100644 --- a/content/docs/prologue/commands.md +++ b/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 diff --git a/content/docs/prologue/introduction.md b/content/docs/prologue/introduction.md index e1a62de..f215533 100644 --- a/content/docs/prologue/introduction.md +++ b/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" >}}) diff --git a/layouts/docs/single.html b/layouts/docs/single.html index 54e581b..c22f5e1 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -30,7 +30,11 @@ {{ if .Site.Params.editPage -}} {{ partial "main/edit-page.html" . }} {{ end -}} - {{ partial "main/docs-navigation.html" . }} + {{ if not .Site.Params.options.collapsibleSidebar -}} + {{ partial "main/docs-navigation.html" . }} + {{ else -}} +
+ {{ end -}} {{ end }} \ No newline at end of file diff --git a/layouts/partials/sidebar/docs-menu.html b/layouts/partials/sidebar/docs-menu.html index 1f158d7..0670b4c 100644 --- a/layouts/partials/sidebar/docs-menu.html +++ b/layouts/partials/sidebar/docs-menu.html @@ -1,13 +1,39 @@ -{{ $currentPage := . -}} -{{ range .Site.Menus.docs -}} -

{{ .Name }}

- {{ if .HasChildren -}} -