[matrix] collapsible sidebar headings

3 files changed, 83 insertions, 6 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index 25a696ab..0d9d324a 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -125,12 +125,14 @@ window.addEventListener('scroll', () => {
     currentSection = sections[sections.length - 1];
   }
   else {
-    sections.forEach(section => {
-      let rect = section.getBoundingClientRect();
-      if (rect.top + document.body.offsetTop < 1) {
-        currentSection = section;
-      }
-    });
+    if (sections) {
+      sections.forEach(section => {
+        let rect = section.getBoundingClientRect();
+        if (rect.top + document.body.offsetTop < 1) {
+          currentSection = section;
+        }
+      });
+    }
   }
 
   if (activeLink) {
@@ -140,6 +142,12 @@ window.addEventListener('scroll', () => {
   if (currentSection) {
     activeLink = document.querySelector(`#sidebar a[href="#${currentSection.id}"]`);
     if (activeLink) {
+      let headingChildren = activeLink.parentElement.parentElement;
+      let heading = headingChildren.previousElementSibling.previousElementSibling;
+      
+      if (heading && headingChildren.style.display === "none") {
+        activeLink = heading;
+      }
       activeLink.parentElement.classList.add('active');
     }
   }
diff --git a/docs/_static/sidebar.js b/docs/_static/sidebar.js
new file mode 100644
index 00000000..8c45a210
--- /dev/null
+++ b/docs/_static/sidebar.js
@@ -0,0 +1,50 @@
+function collapseSection(icon) {
+    icon.classList.remove('expanded');
+    icon.classList.add('collapsed');
+    icon.innerText = 'chevron_right';
+    let children = icon.nextElementSibling.nextElementSibling;
+    // <arrow><heading> 
+    // --> <square><children>
+    children.style.display = "none";
+}
+
+function expandSection(icon) {
+    icon.classList.remove('collapse');
+    icon.classList.add('expanded');
+    icon.innerText = 'expand_more';
+    let children = icon.nextElementSibling.nextElementSibling;
+    children.style.display = "block";
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    let sidebar = document.getElementById('sidebar');
+    let toc = sidebar.querySelector('ul');
+    let allReferences = toc.querySelectorAll('a.reference.internal:not([href="#"])');
+
+    for (let ref of allReferences) {
+
+        let next = ref.nextElementSibling;
+        
+        if (next && next.tagName === "UL") {
+            
+            let icon = document.createElement('span');
+            icon.className = 'material-icons collapsible-arrow expanded';
+            icon.innerText = 'expand_more';
+            
+            if (next.parentElement.tagName == "LI") {
+                next.parentElement.classList.add('no-list-style')
+            }
+            
+            icon.addEventListener('click', () => {
+                if (icon.classList.contains('expanded')) {
+                    collapseSection(icon);
+                } else {
+                    expandSection(icon);
+                }
+            })
+
+            ref.classList.add('ref-internal-padding')
+            ref.parentNode.insertBefore(icon, ref);
+        }
+    }
+});
diff --git a/docs/_static/style.css b/docs/_static/style.css
index efb3d6cc..9018302d 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -329,6 +329,20 @@ aside h3 {
   font-weight: normal;
 }
 
+.collapsible-arrow {
+  font-size: 1.5em!important;
+  left: -1.166em;
+  top: 0.25em;
+  user-select: none;
+  position: relative;
+  line-height: 0.5em;
+}
+
+.ref-internal-padding {
+  position: relative;
+  left: -20px;
+}
+
 #settings-toggle {
   float: right;
 }
@@ -373,6 +387,10 @@ aside .material-icons,
   margin-left: 1.5em;
 }
 
+#sidebar li.no-list-style {
+  list-style: none;
+}
+
 #sidebar form {
   margin: 1em 0;
   display: flex;
@@ -1095,6 +1113,7 @@ div.code-block-caption {
     top: 1em;
     max-height: calc(100vh - 2em);
     overflow-y: auto;
+    min-width: max-content;
     margin: 1em;
   }