Merge pull request #782 from h-enk/single-navbar

Single navbar
This commit is contained in:
Henk Verlinde 2022-06-21 16:55:43 +02:00 committed by GitHub
commit 8634857eaf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 220 additions and 122 deletions

View File

@ -130,6 +130,10 @@ body {
z-index: 1000; z-index: 1000;
height: calc(100vh - 4rem); height: calc(100vh - 4rem);
} }
.docs-sidebar-top {
top: 0;
}
} }
} }
@ -173,6 +177,10 @@ body {
height: calc(100vh - 4rem); height: calc(100vh - 4rem);
overflow-y: auto; overflow-y: auto;
} }
.docs-toc-top {
top: 0;
}
} }
.docs-content { .docs-content {

View File

@ -4,9 +4,7 @@
} }
#mode { #mode {
padding-right: 0.25rem; padding: 0.5rem;
padding-left: 0.25rem;
margin-right: -0.25rem;
} }
.btn-link:focus { .btn-link:focus {
@ -18,10 +16,10 @@
margin-left: 1.25rem; margin-left: 1.25rem;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(lg) {
#mode { #mode {
margin-left: 1.125rem; margin-left: 0.5rem;
margin-right: -0.375rem; margin-right: 0.25rem;
} }
.navbar .btn-link { .navbar .btn-link {
@ -187,6 +185,20 @@ pre {
color: $link-color; color: $link-color;
} }
.dropdown-menu {
/*
width: 100%;
*/
width: auto;
}
@include media-breakpoint-up(lg) {
.dropdown-menu {
width: auto;
}
}
.doks-navbar .dropdown-menu, .doks-navbar .dropdown-menu,
.doks-subnavbar .dropdown-menu { .doks-subnavbar .dropdown-menu {
font-size: 0.875rem; font-size: 0.875rem;
@ -219,16 +231,6 @@ pre {
margin-right: -0.3125rem; margin-right: -0.3125rem;
} }
.dropdown-menu.dropdown-menu-main {
width: 100%;
}
@include media-breakpoint-up(md) {
.dropdown-menu.dropdown-menu-main {
width: auto;
}
}
.dropdown-menu-main .dropdown-item { .dropdown-menu-main .dropdown-item {
color: inherit; color: inherit;
font-size: $font-size-base; font-size: $font-size-base;

View File

@ -4,10 +4,19 @@
#suggestions { #suggestions {
position: absolute; position: absolute;
left: 0; right: 0;
margin-top: 0.5rem; margin-top: 0.5rem;
width: calc(100vw - 3rem); width: calc(100vw - 3rem);
max-width: calc(400px - 3rem);
z-index: $zindex-dropdown; z-index: $zindex-dropdown;
@include media-breakpoint-up(md) {
right: -2rem;
}
@include media-breakpoint-up(lg) {
right: 0;
}
} }
#suggestions a, #suggestions a,
@ -57,9 +66,10 @@
color: $gray-700; color: $gray-700;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(lg) {
#suggestions { #suggestions {
width: 31.125rem; width: 31.125rem;
max-width: 31.125rem;
} }
#suggestions a { #suggestions a {

View File

@ -39,6 +39,8 @@
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.navbar { .navbar {
z-index: 1025; z-index: 1025;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
} }
} }
@ -87,13 +89,19 @@
} }
button#doks-languages { button#doks-languages {
margin-right: -0.5625rem; margin: 0.25rem 0 0;
margin-left: 0.75rem;
@include media-breakpoint-up(lg) {
margin: 0.25rem 0.5rem 0 0.25rem;
}
} }
button#doks-versions { button#doks-versions {
margin-right: -0.5625rem; margin: 0.25rem 0 0;
margin-left: 0;
@include media-breakpoint-up(lg) {
margin: 0.25rem 0.5rem 0 0.25rem;
}
} }
.offcanvas .nav-link { .offcanvas .nav-link {
@ -185,6 +193,14 @@ button#doks-versions {
padding-right: 4rem; padding-right: 4rem;
border: 1px solid transparent; border: 1px solid transparent;
background: $gray-100; background: $gray-100;
@include media-breakpoint-up(md) {
width: calc(100% + 2rem);
}
@include media-breakpoint-up(lg) {
width: 100%;
}
} }
.form-control.is-search:focus { .form-control.is-search:focus {
@ -206,6 +222,14 @@ button#doks-versions {
content: "Ctrl + /"; content: "Ctrl + /";
border: 1px solid $gray-300; border: 1px solid $gray-300;
border-radius: 0.25rem; border-radius: 0.25rem;
@include media-breakpoint-up(md) {
right: -1.4625rem;
}
@include media-breakpoint-up(lg) {
right: 0.3125rem;
}
} }
/* /*
@ -410,15 +434,18 @@ button#doks-versions {
outline: 0; outline: 0;
} }
.doks-sidebar-toggle .doks-collapse { .doks-sidebar-toggle .doks-collapse,
.doks-toc-toggle .doks-collapse {
display: none; display: none;
} }
.doks-sidebar-toggle:not(.collapsed) .doks-expand { .doks-sidebar-toggle:not(.collapsed) .doks-expand,
.doks-toc-toggle:not(.collapsed) .doks-expand {
display: none; display: none;
} }
.doks-sidebar-toggle:not(.collapsed) .doks-collapse { .doks-sidebar-toggle:not(.collapsed) .doks-collapse,
.doks-toc-toggle:not(.collapsed) .doks-collapse {
display: inline-block; display: inline-block;
} }
@ -443,3 +470,16 @@ button#doks-versions {
.dropdown-item:active { .dropdown-item:active {
color: inherit; color: inherit;
} }
.social-link {
padding-left: 0.5rem;
@include media-breakpoint-up(md) {
padding-left: 0;
}
@include media-breakpoint-up(lg) {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}

View File

@ -75,6 +75,9 @@ docsRepoSubPath = ""
editPage = false editPage = false
lastMod = false lastMod = false
[sections]
sectionNav = ["docs", "guides"]
[options] [options]
lazySizes = true lazySizes = true
clipBoard = true clipBoard = true
@ -88,6 +91,7 @@ lastMod = false
multilingualMode = false multilingualMode = false
docsVersioning = false docsVersioning = false
fullWidth = false fullWidth = false
navbarSticky = true
[menu] [menu]
[menu.section] [menu.section]

View File

@ -22,6 +22,7 @@ module.exports = {
'alert-link', 'alert-link',
'container-xxl', 'container-xxl',
'container-fluid', 'container-fluid',
'offcanvas-backdrop',
...whitelister([ ...whitelister([
'./assets/scss/components/_alerts.scss', './assets/scss/components/_alerts.scss',
'./assets/scss/components/_buttons.scss', './assets/scss/components/_buttons.scss',

View File

@ -1,12 +1,12 @@
{{ define "main" }} {{ define "main" }}
<div class="row flex-xl-nowrap"> <div class="row flex-xl-nowrap">
<div class="col-lg-5 col-xl-4 docs-sidebar d-none d-lg-block"> <div class="col-lg-5 col-xl-4 docs-sidebar{{ if ne .Site.Params.options.navbarSticky true }} docs-sidebar-top{{ end }} d-none d-lg-block">
<nav {{ if eq .Site.Params.menu.section.collapsibleSidebar false }}id="sidebar-default" {{ end }}class="docs-links" aria-label="Main navigation"> <nav {{ if eq .Site.Params.menu.section.collapsibleSidebar false }}id="sidebar-default" {{ end }}class="docs-links" aria-label="Main navigation">
{{ partial "sidebar/docs-menu.html" . }} {{ partial "sidebar/docs-menu.html" . }}
</nav> </nav>
</div> </div>
{{ if ne .Params.toc false -}} {{ if ne .Params.toc false -}}
<nav class="docs-toc d-none d-xl-block col-xl-3" aria-label="Secondary navigation"> <nav class="docs-toc{{ if ne .Site.Params.options.navbarSticky true }} docs-toc-top{{ end }} d-none d-xl-block col-xl-3" aria-label="Secondary navigation">
{{ partial "sidebar/docs-toc.html" . }} {{ partial "sidebar/docs-toc.html" . }}
</nav> </nav>
{{ end -}} {{ end -}}

View File

@ -77,7 +77,7 @@
{{ with .Params.mermaid -}} {{ with .Params.mermaid -}}
<script src="{{ $mermaid.RelPermalink }}" defer></script> <script src="{{ $mermaid.RelPermalink }}" defer></script>
{{ end -}} {{ end -}}
{{ if and (.Site.Params.options.flexSearch) (eq .Section "docs") -}} {{ if .Site.Params.options.flexSearch -}}
<script src="{{ $index.RelPermalink }}" defer></script> <script src="{{ $index.RelPermalink }}" defer></script>
{{ end -}} {{ end -}}
{{ else -}} {{ else -}}
@ -102,7 +102,7 @@
{{ with .Params.mermaid -}} {{ with .Params.mermaid -}}
<script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script> <script src="{{ $mermaid.RelPermalink }}" integrity="{{ $mermaid.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ end -}} {{ end -}}
{{ if and (.Site.Params.options.flexSearch) (eq .Section "docs") -}} {{ if .Site.Params.options.flexSearch -}}
<script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script> <script src="{{ $index.Permalink }}" integrity="{{ $index.Data.Integrity }}" crossorigin="anonymous" defer></script>
{{ end -}} {{ end -}}
{{ end -}} {{ end -}}

View File

@ -2,31 +2,51 @@
{{ partial "header/alert.html" . }} {{ partial "header/alert.html" . }}
{{ end -}} {{ end -}}
{{ if eq .Site.Params.options.flexSearch false -}} {{ if eq .Site.Params.options.navbarSticky true -}}
<div class="sticky-lg-top"> <div class="sticky-top">
{{ end -}} {{ end -}}
<div class="header-bar"></div> <div class="header-bar"></div>
<header class="navbar navbar-expand-md navbar-light doks-navbar"> <header class="navbar navbar-expand-lg navbar-light doks-navbar">
<nav class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} flex-wrap flex-md-nowrap" aria-label="Main navigation"> <nav class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<a class="navbar-brand p-0 me-auto" href="{{ "/" | relLangURL }}" aria-label="{{ .Site.Params.Title }}">
<a class="navbar-brand order-0" href="{{ "/" | relLangURL }}" aria-label="{{ .Site.Params.Title }}">
{{ .Site.Params.Title }} {{ .Site.Params.Title }}
</a> </a>
<button class="btn btn-menu d-block d-md-none order-5" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDoks" aria-controls="offcanvasDoks" aria-label="Open main menu"> {{ if (in .Site.Params.sections.sectionNav .Section) -}}
<button class="btn btn-link order-0 ms-auto d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
</button>
<div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="header-bar"></div>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Browse {{ .Section }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<aside class="doks-sidebar mt-n3">
<nav id="doks-docs-nav" aria-label="Tertiary navigation">
{{ partial "sidebar/docs-menu.html" . }}
</nav>
</aside>
</div>
</div>
{{ end -}}
<button class="btn btn-menu order-2 d-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDoks" aria-controls="offcanvasDoks" aria-label="Open main menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button> </button>
<div class="offcanvas offcanvas-end border-0 py-lg-1" tabindex="-1" id="offcanvasDoks" data-bs-backdrop="true" aria-labelledby="offcanvasDoksLabel">
<div class="offcanvas offcanvas-end border-0 py-md-1" tabindex="-1" id="offcanvasDoks" data-bs-backdrop="true" aria-labelledby="offcanvasDoksLabel"> <div class="header-bar d-lg-none"></div>
<div class="header-bar d-md-none"></div> <div class="offcanvas-header d-lg-none">
<div class="offcanvas-header d-md-none">
<h2 class="h5 offcanvas-title ps-2" id="offcanvasDoksLabel"><a class="text-dark" href="{{ "/" | relLangURL }}">{{ .Site.Params.Title }}</a></h2> <h2 class="h5 offcanvas-title ps-2" id="offcanvasDoksLabel"><a class="text-dark" href="{{ "/" | relLangURL }}">{{ .Site.Params.Title }}</a></h2>
<button type="button" class="btn-close text-reset me-2" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button> <button type="button" class="btn-close text-reset me-2" data-bs-dismiss="offcanvas" aria-label="Close main menu"></button>
</div> </div>
<div class="offcanvas-body px-4"> <div class="offcanvas-body p-4 p-lg-0">
<h3 class="h6 text-uppercase mb-3 d-md-none">Main</h3> <ul class="nav flex-column flex-lg-row align-items-lg-center mt-2 mt-lg-0 ms-lg-2 me-lg-auto">
<ul class="nav flex-column flex-md-row ms-md-n3">
{{- $current := . -}} {{- $current := . -}}
{{- $section := $current.Section -}} {{- $section := $current.Section -}}
{{ range .Site.Menus.main -}} {{ range .Site.Menus.main -}}
@ -56,31 +76,40 @@
{{ end }} {{ end }}
{{ end -}} {{ end -}}
</ul> </ul>
<hr class="text-black-50 my-4 d-md-none">
<h3 class="h6 text-uppercase mb-3 d-md-none">Socials</h3> {{ if .Site.Params.options.flexSearch -}}
<ul class="nav flex-column flex-md-row ms-md-auto me-md-n5 pe-md-2"> <hr class="text-black-50 my-4 d-lg-none">
<form class="doks-search position-relative flex-grow-1 ms-lg-auto me-lg-2">
<input id="search" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
<div id="suggestions" class="shadow bg-white rounded d-none"></div>
</form>
{{ end -}}
<hr class="text-black-50 my-4 d-lg-none">
<ul class="nav flex-column flex-lg-row">
{{ range .Site.Menus.social -}} {{ range .Site.Menus.social -}}
<li class="nav-item"> <li class="nav-item">
<a class="nav-link ps-0 py-1" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<small class="ms-2 d-md-none">{{ .Name | safeHTML }}</small></a> <a class="nav-link social-link" href="{{ .URL | relURL }}">{{ .Pre | safeHTML }}<small class="ms-2 d-lg-none">{{ .Name | safeHTML }}</small></a>
</li> </li>
{{ end -}} {{ end -}}
</ul> </ul>
</div>
</div>
{{ if .Site.Params.options.darkMode -}} {{ if .Site.Params.options.darkMode -}}
<button id="mode" class="btn btn-link order-md-1" type="button" aria-label="Toggle user interface mode"> <hr class="text-black-50 my-4 d-lg-none">
<button id="mode" class="btn btn-link" type="button" aria-label="Toggle user interface mode">
<span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span> <span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
<span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span> <span class="toggle-light"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
</button> </button>
{{ end -}} {{ end -}}
{{ if eq .Site.Params.options.multilingualMode true -}} {{ if eq .Site.Params.options.multilingualMode true -}}
<div class="dropdown order-md-2"> <hr class="text-black-50 my-4 d-lg-none">
<div class="dropdown">
<button class="btn btn-doks-light dropdown-toggle" id="doks-languages" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static"> <button class="btn btn-doks-light dropdown-toggle" id="doks-languages" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
{{ .Site.Params.languageISO }} {{ .Site.Params.languageName }}
<span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span> <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end shadow rounded border-0" aria-labelledby="doks-languages"> <ul class="dropdown-menu dropdown-menu-lg-end me-lg-2 shadow rounded border-0" aria-labelledby="doks-languages">
<li><a class="dropdown-item current" aria-current="true" href="{{ .RelPermalink }}">{{ .Site.Language.LanguageName }}</a></li> <li><a class="dropdown-item current" aria-current="true" href="{{ .RelPermalink }}">{{ .Site.Language.LanguageName }}</a></li>
@ -104,30 +133,15 @@
</ul> </ul>
</div> </div>
{{ end -}} {{ end -}}
</nav>
</header>
{{ if eq .Site.Params.options.flexSearch false }}
</div>
{{ end -}}
{{ if eq .Section "docs" -}}
<nav class="doks-subnavbar py-2 sticky-lg-top{{ if eq .Site.Params.options.flexSearch false }} d-lg-none{{ end }}" aria-label="Secondary navigation">
<div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} d-flex align-items-md-center">
{{ if .Site.Params.options.flexSearch -}}
<form class="doks-search position-relative flex-grow-1 me-auto">
<input id="search" class="form-control is-search" type="search" placeholder="Search docs..." aria-label="Search docs..." autocomplete="off">
<div id="suggestions" class="shadow bg-white rounded d-none"></div>
</form>
{{ end -}}
{{ if eq .Site.Params.options.docsVersioning true -}} {{ if eq .Site.Params.options.docsVersioning true -}}
<div class="dropdown ms-3"> <hr class="text-black-50 my-4 d-lg-none">
<div class="dropdown">
<button class="btn btn-doks-light dropdown-toggle" id="doks-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle version menu"> <button class="btn btn-doks-light dropdown-toggle" id="doks-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static" aria-label="Toggle version menu">
<span class="d-none d-lg-inline">Doks</span> v{{ .Site.Params.docsVersion }} <span class="d-none">Doks</span> v{{ .Site.Params.docsVersion }}
<span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end shadow rounded border-0" aria-labelledby="doks-versions"> <ul class="dropdown-menu dropdown-menu-lg-end me-lg-2 shadow rounded border-0" aria-labelledby="doks-versions">
<li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docsVersion }}/prologue/introduction/">Latest ({{ .Site.Params.docsVersion }}.x)</a></li> <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docsVersion }}/prologue/introduction/">Latest ({{ .Site.Params.docsVersion }}.x)</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="/docs/0.2/prologue/introduction/">v0.2.x</a></li> <li><a class="dropdown-item" href="/docs/0.2/prologue/introduction/">v0.2.x</a></li>
@ -137,15 +151,16 @@
</ul> </ul>
</div> </div>
{{ end -}} {{ end -}}
<button class="btn doks-sidebar-toggle d-lg-none ms-3 order-3 collapsed{{ if eq .Site.Params.options.flexSearch false }} ms-auto{{ end }}" type="button" data-bs-toggle="collapse" data-bs-target="#doks-docs-nav" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle documentation navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-collapse" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Collapse</title><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
</button>
</div> </div>
</nav> </div>
</nav>
</header>
{{ if eq .Site.Params.options.navbarSticky true }}
</div>
{{ end -}}
{{ if eq .Section "docs" -}}
<div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }}"> <div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }}">
<aside class="doks-sidebar"> <aside class="doks-sidebar">
<nav id="doks-docs-nav" class="collapse d-lg-none" aria-label="Tertiary navigation"> <nav id="doks-docs-nav" class="collapse d-lg-none" aria-label="Tertiary navigation">
@ -155,8 +170,9 @@
</div> </div>
{{ else if ne .CurrentSection .FirstSection -}} {{ else if ne .CurrentSection .FirstSection -}}
<!--
<nav class="doks-subnavbar py-2 sticky-lg-top d-lg-none" aria-label="Secondary navigation"> <nav class="doks-subnavbar py-2 sticky-lg-top d-lg-none" aria-label="Secondary navigation">
<div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} d-flex align-items-md-center"> <div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }} d-flex align-items-lg-center">
<span class="navbar-text ms-0">{{ .Section | humanize }}</span> <span class="navbar-text ms-0">{{ .Section | humanize }}</span>
<button class="btn doks-sidebar-toggle d-lg-none ms-auto order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#doks-docs-nav" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle documentation navigation"> <button class="btn doks-sidebar-toggle d-lg-none ms-auto order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#doks-docs-nav" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle documentation navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
@ -164,6 +180,7 @@
</button> </button>
</div> </div>
</nav> </nav>
-->
<div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }}"> <div class="container-{{ if .Site.Params.options.fullWidth }}fluid{{ else }}xxl{{ end }}">
<aside class="doks-sidebar"> <aside class="doks-sidebar">

View File

@ -1,6 +1,22 @@
{{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") -}} {{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") -}}
<div class="d-xl-none">
<button class="btn btn-outline-primary btn-sm doks-toc-toggle collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#onThisPage" aria-controls="doks-docs-nav" aria-expanded="false" aria-label="Toggle On this page navigation">
<span>On this page</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="doks doks-expand" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Expand</title><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="doks doks-collapse" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>Collapse</title><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
</span>
</button>
<div class="collapse" id="onThisPage">
<div class="card card-body mt-3 py-1">
<div class="page-links"> <div class="page-links">
<h3>On this page</h3>
{{ .TableOfContents }} {{ .TableOfContents }}
</div> </div>
</div>
</div>
</div>
<div class="page-links d-none d-xl-block">
<h3>On this page</h3>
{{ .TableOfContents }}
</div>
{{ end -}} {{ end -}}