docs: improve ToC

mrholek · mrholek · commit b3f5c73c7161 · 2024-05-23T11:13:12.000+02:00
diff --git a/docs/layouts/_default/docs.html b/docs/layouts/_default/docs.html
@@ -33,9 +33,17 @@ <h2>Other frameworks</h2>
     </div>
 
     {{ if (eq .Page.Params.toc true) }}
-      <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-muted">
-        <strong class="d-block h6 mb-2 pb-2 border-bottom">On this page</strong>
-        {{ .TableOfContents }}
+      <div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
+        <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none" type="button" data-coreui-toggle="collapse" data-coreui-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
+          On this page
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon d-md-none ms-2" aria-hidden="true" viewBox="0 0 512 512">
+            <polygon fill="var(--ci-primary-color, currentColor)" points="256 382.627 60.687 187.313 83.313 164.687 256 337.372 428.687 164.687 451.313 187.313 256 382.627" class="ci-primary"/>
+          </svg>
+        </button>
+        <strong class="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
+        <div class="collapse docs-toc-collapse" id="tocContents">
+          {{ .TableOfContents }}
+        </div>
       </div>
     {{ end }}
 
