Commit 27e2ee17 authored by Henk Verlinde's avatar Henk Verlinde
Browse files

ux: update on this page toggle

parent 7bfe21cb

assets/scss/layouts/_header.scss

+6 −3
Original line number Diff line number Diff line
@@ -434,15 +434,18 @@ button#doks-versions { 
  outline: 0;

}



.doks-sidebar-toggle .doks-collapse {

.doks-sidebar-toggle .doks-collapse,

.doks-toc-toggle .doks-collapse {

  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;

}



.doks-sidebar-toggle:not(.collapsed) .doks-collapse {

.doks-sidebar-toggle:not(.collapsed) .doks-collapse,

.doks-toc-toggle:not(.collapsed) .doks-collapse {

  display: inline-block;

}

layouts/partials/sidebar/docs-toc.html

+8 −6
Original line number Diff line number Diff line 
{{ if and (ne .Params.toc false) (ne .TableOfContents "<nav id=\"TableOfContents\"></nav>") -}}

<div class="d-xl-none">

  <p>

    <a class="btn btn-outline-primary btn-sm" data-bs-toggle="collapse" href="#onThisPage" role="button" aria-expanded="false" aria-controls="onThisPage">

      On this page

    </a>

  </p>

  <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 py-1">

    <div class="card card-body mt-3 py-1">

      <div class="page-links">

        {{ .TableOfContents }}

      </div>