From 1a13624c5e50be9b0c3c4edaec6d33d629ad132a Mon Sep 17 00:00:00 2001
From: Matthias Beyer <mail@beyermatthias.de>
Date: Mon, 12 Jul 2021 12:57:14 +0200
Subject: Make sub-section folders collapsable

This patch makes the sub-section folders start collapsed and able to
un-collapse them.

Signed-off-by: Matthias Beyer <mail@beyermatthias.de>
---
 sass/main.scss       | 2 +-
 templates/index.html | 4 ++--
 templates/macro.html | 8 +++++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/sass/main.scss b/sass/main.scss
index 56f32be..a5eb41f 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -240,7 +240,7 @@ main {
   @include color(color, --second-text-color, $theme-light-second-text-color);
 }
 
-#subpages {
+.subpages {
   padding-left: 1em;
 }
 
diff --git a/templates/index.html b/templates/index.html
index 1752e61..07bbb5c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -69,8 +69,8 @@
       <script type="text/javascript" src="{{ get_url(path="themes.js") | safe }}"></script>
 
       <script>
-        function burger() {
-          var x = document.getElementById("bger");
+        function burger(id) {
+          var x = document.getElementById(id);
           if (x.style.display === "block") {
             x.style.display = "none";
           } else {
diff --git a/templates/macro.html b/templates/macro.html
index cf7b7fe..1b128d3 100644
--- a/templates/macro.html
+++ b/templates/macro.html
@@ -1,8 +1,10 @@
 {% macro subtree(sec) %}
     {% for subsection in sec.subsections | sort %}
         {% set subsection_item = get_section(path=subsection) %}
-        <li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAaElEQVRIx2NgGOqAEcZgZefQb25suIBPcW19g8Hvnz8ukmwBKzuHQHNjw3tiNFRUVDCSZAExLicX1NY3ODJ2dHT8ZxgF+OKA1kHERGsfjFowasGoBaMWEGNBbX2DI60Mr61vkBr69QEAFDIY9Yz1owAAAAAASUVORK5CYII=" width="16px" />&nbsp;<a href="{{ subsection_item.permalink | safe }}">{{ subsection_item.title  }}</a></li>
-        <ul id="subpages">
+        <li><a href="javascript:void(0);" onclick="burger('subpages-{{ subsection_item.title }}')"><img
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAaElEQVRIx2NgGOqAEcZgZefQb25suIBPcW19g8Hvnz8ukmwBKzuHQHNjw3tiNFRUVDCSZAExLicX1NY3ODJ2dHT8ZxgF+OKA1kHERGsfjFowasGoBaMWEGNBbX2DI60Mr61vkBr69QEAFDIY9Yz1owAAAAAASUVORK5CYII="
+            width="16px" /></a>&nbsp;<a href="{{ subsection_item.permalink | safe }}">{{ subsection_item.title  }}</a></li>
+        <ul style="display: none;" class="subpages" id="subpages-{{ subsection_item.title }}">
             {{ macro::subtree(sec=subsection_item) }}
         </ul>
     {% endfor %}
@@ -12,7 +14,7 @@
 {% endmacro subtree %}
 
 {% macro tree(sec) %}
-    <a href="javascript:void(0);" onclick="burger()" id="mobile">&#9776;</a>
+    <a href="javascript:void(0);" onclick="burger('bger')" id="mobile">&#9776;</a>
     <ul id="bger">
         {{ macro::subtree(sec=sec) }}
     </ul>
-- 
cgit v1.2.3