ux: update section navigtion mobile

This commit is contained in:
Henk Verlinde 2022-06-20 19:46:02 +02:00
parent 27e2ee173c
commit acc6f89d18
1 changed files with 19 additions and 6 deletions

View File

@ -3,7 +3,7 @@
{{ end -}} {{ end -}}
{{ if eq .Site.Params.options.navbarSticky true -}} {{ 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>
@ -16,16 +16,29 @@
</a> </a>
{{ if eq .Section "docs" -}} {{ if eq .Section "docs" -}}
<button class="btn doks-sidebar-toggle collapsed order-1 ms-auto d-lg-none" 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 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" 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" 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>
<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> </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 -}} {{ 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"> <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-lg-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-lg-none"></div>
<div class="offcanvas-header d-lg-none"> <div class="offcanvas-header d-lg-none">
@ -33,7 +46,7 @@
<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 p-4 p-lg-0"> <div class="offcanvas-body p-4 p-lg-0">
<ul class="nav flex-column flex-lg-row align-items-lg-center ms-lg-2 me-lg-auto"> <ul class="nav flex-column flex-lg-row align-items-lg-center mt-2 mt-lg-0 ms-lg-2 me-lg-auto">
{{- $current := . -}} {{- $current := . -}}
{{- $section := $current.Section -}} {{- $section := $current.Section -}}
{{ range .Site.Menus.main -}} {{ range .Site.Menus.main -}}