indeterminate sidebar toggle

observablehq · Oct 14, 2023 · a5aa182 · a5aa182
1 parent af98e30
commit a5aa182
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git 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
@@ -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">