click to expand

static/index.js

@@ -12,8 +12,26 @@ const handleClick = () => {
 
 }
 
+const handleNavClick = (event) => {
+    event.target.classList.toggle("fa-rotate-90")
+    const items = event.target.parentNode.children
+    for(const item of items) {
+        if(item.localName == "ul") {
+            for(const child of item.children) {
+                child.classList.toggle("hidden")
+            }
+        }
+    }
+}
+
 const main = () => {
     document.getElementById("navigation-button").addEventListener("click", handleClick)
+
+    const toggles = document.getElementsByClassName("nav-toggle")
+    for(const item of toggles) {
+        item.addEventListener("click", handleNavClick);
+    }
+
 }
 
 window.onload = main;

templates/macros.html

@@ -13,7 +13,7 @@
     {%- set renderAll = false %}
     {%- for page in currentPage.ancestors %}
         {%- set iteratorSection = get_section(path=page) %}
-            {%- if iteratorSection.path == subsection.path or iteratorSection.path == subsectionParent.path %}
+            {%- if iteratorSection.path == subsectionParent.path %}
                 {%- set_global renderAll = true %}
                 {%- break %}
             {%- endif %}
@@ -40,8 +40,13 @@
         {%- set class = class ~ " text-title" %}
     {%- endif -%}
 
+    {%- set iconClass = "" -%}
+    {%- if currentPage.ancestors is containing(subsection.relative_path) or current_path == subsection.path -%}
+        {%- set iconClass = "fa-rotate-90" -%}
+    {%- endif -%}
+
     <li class="{{class}}" data-expand-tag="{{subsection.path}}" style="padding-left: 20px">
-        <i class="fa-solid fa-caret-right"></i>
+        <i class="fa-solid fa-caret-right text-blue-300 {{iconClass}} nav-toggle cursor-pointer"></i>
         <a href="{{ subsection.permalink | safe }}" class="{{linkClass}}">
             {{ subsection.title }}
         </a>