[matrix] collapsible sidebar headings

docs/_static/custom.js

@@ -125,6 +125,7 @@ window.addEventListener('scroll', () => {
     currentSection = sections[sections.length - 1];
   }
   else {
+    if (sections) {
       sections.forEach(section => {
         let rect = section.getBoundingClientRect();
         if (rect.top + document.body.offsetTop < 1) {
@@ -132,6 +133,7 @@ window.addEventListener('scroll', () => {
         }
       });
     }
+  }
 
   if (activeLink) {
     activeLink.parentElement.classList.remove('active');
@@ -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');
     }
   }

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);
+        }
+    }
+});

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;
   }
 

docs/conf.py

@@ -245,6 +245,7 @@ html_search_scorer = '_static/scorer.js'
 html_js_files = [
   'custom.js',
   'copy.js',
+  'sidebar.js'
 ]
 
 # Output file base name for HTML help builder.