From a5aa182e94330b11a8d5e9732f61f4b985e0d1df Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Sat, 14 Oct 2023 14:37:07 -0700
Subject: [PATCH] indeterminate sidebar toggle

---
 public/style.css | 18 +++++++++++++++---
 src/render.ts    | 10 +++++++++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/public/style.css b/public/style.css
index a16617230..a5f510c39 100644
--- a/public/style.css
+++ b/public/style.css
@@ -100,16 +100,22 @@ main {
   appearance: none;
   display: flex;
   align-items: center;
+  justify-content: center;
   margin: 0;
   padding: 2px;
   cursor: pointer;
   z-index: 2;
   color: var(--theme-foreground-faint);
+  font-weight: 700;
   font-size: 20px;
 }
 
 #observablehq-sidebar-toggle::before {
-  content: "≡";
+  content: "⟩";
+}
+
+#observablehq-sidebar-toggle:checked::before {
+  content: "⟨";
 }
 
 .observablehq-link a {
@@ -162,10 +168,16 @@ main {
   #observablehq-sidebar {
     transition: none;
   }
-  #observablehq-sidebar-toggle:checked + #observablehq-sidebar {
+  #observablehq-sidebar-toggle:indeterminate::before {
+    content: "⟨";
+  }
+  #observablehq-sidebar-toggle:checked + #observablehq-sidebar,
+  #observablehq-sidebar-toggle:indeterminate + #observablehq-sidebar {
+    left: 0;
     box-shadow: none;
   }
-  #observablehq-sidebar-toggle:checked ~ #observablehq-center {
+  #observablehq-sidebar-toggle:checked ~ #observablehq-center,
+  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-center {
     padding-left: calc(240px + 3rem);
   }
   pre {
diff --git a/src/render.ts b/src/render.ts
index a59e69723..dccd8241e 100644
--- a/src/render.ts
+++ b/src/render.ts
@@ -97,7 +97,15 @@ ${
     .join("")}
   </ol>
 </nav>
-<script>document.querySelector("#observablehq-sidebar-toggle").checked = matchMedia("(min-width: calc(640px + 4rem + 0.5rem + 240px + 2rem))").matches;</script>
+<script>{
+  const toggle = document.querySelector("#observablehq-sidebar-toggle");
+  let indeterminate = toggle.indeterminate = true;
+  toggle.onclick = () => {
+    const matches = matchMedia("(min-width: calc(640px + 4rem + 0.5rem + 240px + 2rem))").matches;
+    if (indeterminate) toggle.checked = !matches, indeterminate = false;
+    else if (toggle.checked === matches) toggle.indeterminate = indeterminate = true;
+  };
+}</script>
 `
     : ""
 }<div id="observablehq-center">