sidebar backdrop (#266)

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;
   }
@@ -328,6 +345,9 @@ a[href],
     padding-left: calc(240px + 3rem);
     padding-right: 1rem;
   }
+  #observablehq-sidebar-toggle:checked ~ #observablehq-sidebar-backdrop {
+    display: none;
+  }
   pre {
     border-radius: 4px;
   }

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(

test/output/build/archives/tar.html

@@ -48,6 +48,7 @@
 
 </script>
 <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"><a href="./">Home</a></li>

test/output/build/archives/zip.html

@@ -36,6 +36,7 @@
 
 </script>
 <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"><a href="./">Home</a></li>

test/output/build/config/index.html

@@ -13,6 +13,7 @@
 
 </script>
 <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 observablehq-link-active"><a href="./">Home</a></li>

test/output/build/config/one.html

@@ -13,6 +13,7 @@
 
 </script>
 <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"><a href="./">Home</a></li>

test/output/build/config/sub/two.html

@@ -13,6 +13,7 @@
 
 </script>
 <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"><a href="../">Home</a></li>

test/output/build/config/toc-override.html

@@ -13,6 +13,7 @@
 
 </script>
 <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"><a href="./">Home</a></li>

test/output/build/config/toc.html

@@ -13,6 +13,7 @@
 
 </script>
 <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"><a href="./">Home</a></li>

test/output/build/files/files.html

@@ -32,6 +32,7 @@
 
 </script>
 <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"><a href="./">Home</a></li>