Make sidebar categories collapsible

_static/css/custom.css

@@ -17,6 +17,7 @@
     --navbar-current-background-color: #212d51;
     --navbar-current-background-color-hover: #182343;
     --navbar-current-background-color-active: #131e3b;
+    --navbar-category-active-color: rgba(255 115 129 / 10%);
     --navbar-level-1-color: #c3e3ff;
     --navbar-level-2-color: #b8d6f0;
     --navbar-level-3-color: #a3c4e1;
@@ -107,6 +108,7 @@
         --navbar-current-background-color: #333639;
         --navbar-current-background-color-hover: #44474a;
         --navbar-current-background-color-active: #222528;
+        --navbar-category-active-color: rgba(238 115 129 / 10%);
         --navbar-level-1-color: #ddd;
         --navbar-level-2-color: #ccc;
         --navbar-level-3-color: #bbb;
@@ -934,6 +936,10 @@ kbd.compound > .kbd,
     background-color: var(--navbar-background-color-active);
 }
 
+.wy-menu-vertical li.toctree-l1 > a {
+    padding: .4045em 1.918em;
+}
+
 .wy-menu-vertical li.toctree-l1.current > a {
     border: none;
 }
@@ -1108,3 +1114,34 @@ kbd.compound > .kbd,
     border-left-color: var(--code-example-bad-color);
     border-left-width: 8px;
 }
+
+/* Togglable sidebar sections. */
+.wy-menu-vertical p.caption {
+    cursor: pointer;
+}
+.wy-menu-vertical p.caption.active {
+    background-color: var(--navbar-category-active-color);
+}
+.wy-menu-vertical p.caption:hover {
+    background-color: var(--navbar-background-color-hover);
+}
+
+.wy-menu-vertical p.caption.active .caption-text:before {
+    transform: rotate(90deg);
+}
+.wy-menu-vertical p.caption .caption-text:before {
+    content: "❯";
+    display: inline-block;
+    margin-left: -4px;
+    transition: transform 0.2s;
+    width: 16px;
+    height: 32px;
+    transform-origin: 2px 16px;
+}
+
+.wy-menu-vertical p.caption + ul {
+    display: none;
+}
+.wy-menu-vertical p.caption + ul.active {
+    display: block;
+}

_static/js/custom.js

@@ -237,4 +237,44 @@ $(document).ready(() => {
   /*! instant.page v5.1.0 - (C) 2019-2020 Alexandre Dieulot - https://instant.page/license */
   instantPageScript.innerText = 'let t,e;const n=new Set,o=document.createElement("link"),i=o.relList&&o.relList.supports&&o.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype,s="instantAllowQueryString"in document.body.dataset,a="instantAllowExternalLinks"in document.body.dataset,r="instantWhitelist"in document.body.dataset,c="instantMousedownShortcut"in document.body.dataset,d=1111;let l=65,u=!1,f=!1,m=!1;if("instantIntensity"in document.body.dataset){const t=document.body.dataset.instantIntensity;if("mousedown"==t.substr(0,"mousedown".length))u=!0,"mousedown-only"==t&&(f=!0);else if("viewport"==t.substr(0,"viewport".length))navigator.connection&&(navigator.connection.saveData||navigator.connection.effectiveType&&navigator.connection.effectiveType.includes("2g"))||("viewport"==t?document.documentElement.clientWidth*document.documentElement.clientHeight<45e4&&(m=!0):"viewport-all"==t&&(m=!0));else{const e=parseInt(t);isNaN(e)||(l=e)}}if(i){const n={capture:!0,passive:!0};if(f||document.addEventListener("touchstart",function(t){e=performance.now();const n=t.target.closest("a");if(!h(n))return;v(n.href)},n),u?c||document.addEventListener("mousedown",function(t){const e=t.target.closest("a");if(!h(e))return;v(e.href)},n):document.addEventListener("mouseover",function(n){if(performance.now()-e<d)return;const o=n.target.closest("a");if(!h(o))return;o.addEventListener("mouseout",p,{passive:!0}),t=setTimeout(()=>{v(o.href),t=void 0},l)},n),c&&document.addEventListener("mousedown",function(t){if(performance.now()-e<d)return;const n=t.target.closest("a");if(t.which>1||t.metaKey||t.ctrlKey)return;if(!n)return;n.addEventListener("click",function(t){1337!=t.detail&&t.preventDefault()},{capture:!0,passive:!1,once:!0});const o=new MouseEvent("click",{view:window,bubbles:!0,cancelable:!1,detail:1337});n.dispatchEvent(o)},n),m){let t;(t=window.requestIdleCallback?t=>{requestIdleCallback(t,{timeout:1500})}:t=>{t()})(()=>{const t=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){const n=e.target;t.unobserve(n),v(n.href)}})});document.querySelectorAll("a").forEach(e=>{h(e)&&t.observe(e)})})}}function p(e){e.relatedTarget&&e.target.closest("a")==e.relatedTarget.closest("a")||t&&(clearTimeout(t),t=void 0)}function h(t){if(t&&t.href&&(!r||"instant"in t.dataset)&&(a||t.origin==location.origin||"instant"in t.dataset)&&["http:","https:"].includes(t.protocol)&&("http:"!=t.protocol||"https:"!=location.protocol)&&(s||!t.search||"instant"in t.dataset)&&!(t.hash&&t.pathname+t.search==location.pathname+location.search||"noInstant"in t.dataset))return!0}function v(t){if(n.has(t))return;const e=document.createElement("link");e.rel="prefetch",e.href=t,document.head.appendChild(e),n.add(t)}';
   document.head.appendChild(instantPageScript);
+
+  // Make sections in the sidebar togglable.
+  let has_current = false;
+  let menu_headers = document.querySelectorAll(".wy-menu-vertical .caption[role=heading]");
+  menu_headers.forEach(it => {
+      let connected_menu = it.nextElementSibling;
+
+      // Enable toggling.
+      it.addEventListener("click", () => {
+          if (connected_menu.classList.contains("active")) {
+            connected_menu.classList.remove("active");
+            it.classList.remove("active");
+          } else {
+            connected_menu.classList.add("active");
+            it.classList.add("active");
+          }
+
+          // Hide other sections.
+          menu_headers.forEach(ot => {
+            if (ot !== it && ot.classList.contains("active")) {
+              ot.nextElementSibling.classList.remove("active");
+              ot.classList.remove("active");
+            }
+          });
+      }, true);
+
+      // Set the default state, expand our current section.
+      if (connected_menu.classList.contains("current")) {
+        connected_menu.classList.add("active");
+        it.classList.add("active");
+
+        has_current = true;
+      }
+  });
+
+  // Unfold the first (general information) section on the home page.
+  if (!has_current && menu_headers.length > 0) {
+    menu_headers[0].classList.add("active");
+    menu_headers[0].nextElementSibling.classList.add("active");
+  }
 });