From 27e2ee173c09c1aeb72060f2f1eefada927cd394 Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Mon, 20 Jun 2022 15:00:01 +0200
Subject: [PATCH] ux: update on this page toggle

---
 assets/scss/layouts/_header.scss       |  9 ++++++---
 layouts/partials/sidebar/docs-toc.html | 14 ++++++++------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/assets/scss/layouts/_header.scss b/assets/scss/layouts/_header.scss
index f53d1bf..7bc7323 100644
--- a/assets/scss/layouts/_header.scss
+++ b/assets/scss/layouts/_header.scss
@@ -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;
 }
 
diff --git a/layouts/partials/sidebar/docs-toc.html b/layouts/partials/sidebar/docs-toc.html
index caae3f0..ba41c9a 100644
--- a/layouts/partials/sidebar/docs-toc.html
+++ b/layouts/partials/sidebar/docs-toc.html
@@ -1,12 +1,14 @@
 {{ 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>