sidebar backdrop

Author: mbostock

public/style.css

@@ -116,7 +116,7 @@ body {
   font: 14px var(--sans-serif);
   font-weight: 500;
   width: 240px;
-  z-index: 1;
+  z-index: 2;
   top: 0;
   bottom: 0;
   left: calc(-240px - 2rem);
@@ -199,7 +199,7 @@ body {
   margin: 0;
   padding: 2px;
   cursor: pointer;
-  z-index: 2;
+  z-index: 3;
   background: none;
   color: var(--theme-foreground-muted);
   font-weight: 700;
@@ -296,7 +296,7 @@ a[href],
   color: var(--theme-foreground-focus);
 }
 
-#observablehq-sidebar-toggle:checked + #observablehq-sidebar {
+#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar {
   left: 0;
   box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.1);
 }
@@ -305,8 +305,22 @@ a[href],
   transition: left 150ms ease;
 }
 
+#observablehq-sidebar-backdrop {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+}
+
+#observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop {
+  display: initial;
+}
+
 @media (prefers-color-scheme: dark) {
-  #observablehq-sidebar-toggle:checked + #observablehq-sidebar {
+  #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar {
     box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.5);
   }
 }
@@ -318,8 +332,11 @@ a[href],
   #observablehq-sidebar-toggle:indeterminate::before {
     content: "⟨";
   }
-  #observablehq-sidebar-toggle:checked + #observablehq-sidebar,
-  #observablehq-sidebar-toggle:indeterminate + #observablehq-sidebar {
+  #observablehq-sidebar-backdrop {
+    display: none;
+  }
+  #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar,
+  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-sidebar {
     left: 0;
     box-shadow: none;
   }

src/render.ts

@@ -88,6 +88,7 @@ ${renderFooter(path, options)}
 
 function renderSidebar(title = "Home", pages: (Page | Section)[], path: string): Html {
   return html`<input id="observablehq-sidebar-toggle" type="checkbox">
+<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
   <ol>
     <li class="observablehq-link${path === "/index" ? " observablehq-link-active" : ""}"><a href="${relativeUrl(