From cd529c25795053fbc10d2592b6b2af8327ddc518 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Mon, 21 Nov 2022 08:14:06 -0500
Subject: [PATCH 1/3] Collapse sections of the sidebar

---
 assets/style.scss             | 72 ++++++++++++++++++++++++++++++++---
 layouts/partials/sidebar.html | 42 +++++++++++++++++++-
 2 files changed, 107 insertions(+), 7 deletions(-)

diff --git a/assets/style.scss b/assets/style.scss
index 460744ac..66f53c97 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -125,6 +125,10 @@ body {
     margin-top: 12px;
     margin-bottom: 52px;
 
+    :root.js & {
+      margin-bottom: 42px;
+    }
+
     img {
       height: 38px;
     }
@@ -138,9 +142,52 @@ body {
     }
   }
 
+  .toggle-button {
+    -webkit-appearance: none;
+    appearance: none;
+    background: lighten($darkest, 4%);
+    border: none;
+    border-radius: 4px;
+    padding: 6px 12px 4px;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+    color: inherit;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+
+    strong {
+      font-size: 1.3em;
+      line-height: 0;
+      margin-right: 0.5em;
+      margin-bottom: 0.1em;
+    }
+
+    &:hover,
+    &:focus {
+      background: lighten($darkest, 8%);
+    }
+    &:active {
+      background: lighten($darkest, 12%);
+    }
+
+    :root:not(.js) & {
+      display: none;
+    }
+  }
+
   & > ul > li {
     margin-bottom: 26px;
 
+    &.collapsed {
+      & > .sub-title::before {
+        transform: rotate(-90deg);
+      }
+      margin-bottom: 10px;
+    }
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -151,6 +198,21 @@ body {
     padding: 10px;
     font-weight: 500;
     text-transform: uppercase;
+
+    :root.js & {
+      -webkit-user-select: none;
+      user-select: none;
+      cursor: pointer;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin-right: 10px;
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 10 10"><path fill="%239baec8" d="M5 10L0 0h10z"/></svg>') no-repeat;
+      }
+    }
   }
 
   & > ul a {
@@ -161,11 +223,11 @@ body {
     padding: 10px;
   }
 
-  .sub-menu {
-    a.active {
-      color: $vibrant;
-    }
+  a.active {
+    color: $vibrant;
+  }
 
+  .sub-menu {
     &.collapsed {
       display: none;
     }
@@ -840,4 +902,4 @@ main {
     align-content: center;
     margin-left: 0.25em;
   }
-}
\ No newline at end of file
+}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index f93a3515..b01fec31 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -4,8 +4,9 @@
 
 <ul>
   {{ $currentPage := . }}
+  <button class="toggle-button"><strong>+</strong><span>Expand All</span></button>
   {{ range .Site.Menus.docs.ByWeight }}
-    <li>
+    <li class="{{ if .Page }}collapsed stay-collapsed{{ end }}">
       {{ if .Page }}
         <a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>
       {{ else }}
@@ -13,7 +14,7 @@
       {{ end }}
 
       {{ if .HasChildren }}
-        <ul class="sub-menu">
+        <ul class="sub-menu" id="sidebar-{{ anchorize .Name }}">
           {{ range .Children }}
             <li>
               <a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>
@@ -34,3 +35,40 @@
     </li>
   {{ end }}
 </ul>
+
+<script>
+  document.documentElement.classList.add('js');
+  for (const header of document.querySelectorAll('.sidebar .sub-title')) {
+    header.role = 'button';
+    header.tabIndex = 0;
+    header.ariaExpanded = true;
+    header.ariaControlsElement = header.nextElementSibling;
+    const toggle = () => {
+      header.nextElementSibling.classList.toggle('collapsed');
+      const collapsed = header.nextElementSibling.classList.contains('collapsed')
+      header.ariaExpanded = !collapsed;
+      header.parentNode.classList.toggle('collapsed', collapsed);
+    }
+    header.addEventListener('click', toggle);
+    if (!header.nextElementSibling.querySelector('.active')) {
+      toggle()
+    }
+  }
+  const toggle = document.querySelector('.sidebar .toggle-button')
+  toggle.addEventListener('click', () => {
+    const collapsed = document.querySelectorAll('.sidebar li.collapsed:not(.stay-collapsed)')
+    if (collapsed.length) {
+      for (const collapsible of collapsed) {
+        collapsible.querySelector('.sub-title').click();
+      }
+      toggle.querySelector('strong').textContent = '\u2212' // minus sign
+      toggle.querySelector('span').textContent = 'Collapse All'
+    } else {
+      for (const collapsible of document.querySelectorAll('.sidebar > ul > li:not(.stay-collapsed)')) {
+        collapsible.querySelector('.sub-title').click();
+      }
+      toggle.querySelector('strong').textContent = '+'
+      toggle.querySelector('span').textContent = 'Expand All'
+    }
+  })
+</script>

From f052c1e0f94fe468f4d5e065552aeec6dbccb233 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Mon, 21 Nov 2022 08:22:20 -0500
Subject: [PATCH 2/3] Add keyboard accessibility

---
 assets/style.scss             | 2 +-
 layouts/partials/sidebar.html | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/style.scss b/assets/style.scss
index 66f53c97..372e2b3f 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -77,7 +77,7 @@ table {
   border-spacing: 0;
 }
 
-a {
+a:not(:focus-visible) {
   outline: 0;
 }
 
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index b01fec31..e6512940 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -50,6 +50,12 @@
       header.parentNode.classList.toggle('collapsed', collapsed);
     }
     header.addEventListener('click', toggle);
+    header.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
+        toggle();
+        e.preventDefault();
+      }
+    });
     if (!header.nextElementSibling.querySelector('.active')) {
       toggle()
     }

From f13bc74f4a41dfcf1cc5feeaa4b00006022a6302 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Thu, 27 Apr 2023 12:52:58 -0400
Subject: [PATCH 3/3] Move JS to assets/main.js

---
 assets/main.js                | 48 ++++++++++++++++++++++++++++++++++-
 layouts/partials/sidebar.html | 43 -------------------------------
 2 files changed, 47 insertions(+), 44 deletions(-)

diff --git a/assets/main.js b/assets/main.js
index 35c7f745..ca459c0f 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -2,7 +2,53 @@
   'use strict';
 
   const onLoaded = () => {
-    // Nothing for now
+    document.documentElement.classList.add('js');
+
+    for (const header of document.querySelectorAll('.sidebar .sub-title')) {
+      header.role = 'button';
+      header.tabIndex = 0;
+      header.ariaExpanded = true;
+      header.ariaControlsElement = header.nextElementSibling;
+      const toggle = () => {
+        header.nextElementSibling.classList.toggle('collapsed');
+        const collapsed =
+          header.nextElementSibling.classList.contains('collapsed');
+        header.ariaExpanded = !collapsed;
+        header.parentNode.classList.toggle('collapsed', collapsed);
+      };
+      header.addEventListener('click', toggle);
+      header.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
+          toggle();
+          e.preventDefault();
+        }
+      });
+      if (!header.nextElementSibling.querySelector('.active')) {
+        toggle();
+      }
+    }
+
+    const toggle = document.querySelector('.sidebar .toggle-button');
+    toggle.addEventListener('click', () => {
+      const collapsed = document.querySelectorAll(
+        '.sidebar li.collapsed:not(.stay-collapsed)'
+      );
+      if (collapsed.length) {
+        for (const collapsible of collapsed) {
+          collapsible.querySelector('.sub-title').click();
+        }
+        toggle.querySelector('strong').textContent = '\u2212'; // minus sign
+        toggle.querySelector('span').textContent = 'Collapse All';
+      } else {
+        for (const collapsible of document.querySelectorAll(
+          '.sidebar > ul > li:not(.stay-collapsed)'
+        )) {
+          collapsible.querySelector('.sub-title').click();
+        }
+        toggle.querySelector('strong').textContent = '+';
+        toggle.querySelector('span').textContent = 'Expand All';
+      }
+    });
   };
 
   if (['interactive', 'complete'].indexOf(document.readyState) !== -1) {
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index e6512940..7c839615 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -35,46 +35,3 @@
     </li>
   {{ end }}
 </ul>
-
-<script>
-  document.documentElement.classList.add('js');
-  for (const header of document.querySelectorAll('.sidebar .sub-title')) {
-    header.role = 'button';
-    header.tabIndex = 0;
-    header.ariaExpanded = true;
-    header.ariaControlsElement = header.nextElementSibling;
-    const toggle = () => {
-      header.nextElementSibling.classList.toggle('collapsed');
-      const collapsed = header.nextElementSibling.classList.contains('collapsed')
-      header.ariaExpanded = !collapsed;
-      header.parentNode.classList.toggle('collapsed', collapsed);
-    }
-    header.addEventListener('click', toggle);
-    header.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
-        toggle();
-        e.preventDefault();
-      }
-    });
-    if (!header.nextElementSibling.querySelector('.active')) {
-      toggle()
-    }
-  }
-  const toggle = document.querySelector('.sidebar .toggle-button')
-  toggle.addEventListener('click', () => {
-    const collapsed = document.querySelectorAll('.sidebar li.collapsed:not(.stay-collapsed)')
-    if (collapsed.length) {
-      for (const collapsible of collapsed) {
-        collapsible.querySelector('.sub-title').click();
-      }
-      toggle.querySelector('strong').textContent = '\u2212' // minus sign
-      toggle.querySelector('span').textContent = 'Collapse All'
-    } else {
-      for (const collapsible of document.querySelectorAll('.sidebar > ul > li:not(.stay-collapsed)')) {
-        collapsible.querySelector('.sub-title').click();
-      }
-      toggle.querySelector('strong').textContent = '+'
-      toggle.querySelector('span').textContent = 'Expand All'
-    }
-  })
-</script>