💄🔧：keep what the old sidebar got right

Read against bento-sidebar's own source rather than trusting that a
drawer is a drawer. Four things it did that this had dropped:

The panel hangs off the trailing edge, so in a page that reads right to
left it has to leave to the left. It was leaving to the right whatever
the direction, which parked the closed panel in the middle of the
viewport. No page sets `lang: ar` yet, but the layout emits `dir='rtl'`
for one that does.

`overflow-y: auto` alone makes the other axis scrollable too, so a long
entry would have given the drawer a horizontal scrollbar. The old one
pinned `overflow-x: hidden` on purpose.

A drag on the backdrop scrolled the page behind it. The old one made
the backdrop swallow the gesture; `touch-action` says the same thing
without the two hacks it needed to do it.

Escape closed the drawer and carried on to whatever else was listening.

The slide is the old one's again as well, a sharp decelerate over
350ms, so the motion is the one the site had rather than a new one.

Left behind deliberately: `role="menu"` on a list of links, which wants
`menuitem` children to mean anything and reads worse than the labelled
`nav` around it. The toolbar attribute, the `open` attribute as an API,
and pausing media on close were never used here. History integration —
the back button closing the drawer — belonged to `amp-sidebar`, not to
the component this site loaded, so it was never ours to lose.

Signed-off-by: Derek Lewis <DerekNonGeneric@inf.is>
Assisted-by: Claude-Code:claude-opus-5

Author: DerekNonGeneric

_assets/styles/_nav.scss

@@ -1,3 +1,8 @@
+// The slide bento-sidebar used, kept so the motion is the one the site
+// had: a sharp decelerate rather than a symmetric ease.
+$sidebar-slide-time: 350ms;
+$sidebar-slide: $sidebar-slide-time cubic-bezier(0, 0, 0.21, 1);
+
 // `manipulation` is the whole reason the menu button was unreliable on a
 // phone. Left at `auto`, Safari holds a tap for a third of a second to see
 // whether a second one is coming and a double-tap should zoom instead --
@@ -47,19 +52,26 @@
   visibility: hidden;
   width: min(15rem, 70vw);
   padding-top: $navbar-height;
-  overflow-y: auto;
+  overflow: hidden auto;
   overscroll-behavior: contain;
   background-color: $secondary;
   transform: translateX(100%);
   transition:
-    transform 0.3s ease,
-    visibility 0s linear 0.3s;
+    transform $sidebar-slide,
+    visibility 0s linear $sidebar-slide-time;
+}
+
+// The panel hangs off the trailing edge, which is the left one in a page
+// that reads right to left, so it has to leave in that direction too.
+// Without this the closed panel sits in the middle of the viewport.
+[dir='rtl'] .sidebar {
+  transform: translateX(-100%);
 }
 
 .sidebar.is-open {
   visibility: visible;
   transform: none;
-  transition: transform 0.3s ease;
+  transition: transform $sidebar-slide;
 }
 
 .sidebar .nav-link {
@@ -77,17 +89,22 @@
   inset: 0;
   z-index: $zindex-fixed - 10;
   visibility: hidden;
+
+  // A drag here scrolls nothing. Without it the page behind creeps along
+  // under the finger, which `overflow: hidden` on the body does not reliably
+  // stop on iOS.
+  touch-action: none;
   background-color: rgb(0 0 0 / 50%);
   opacity: 0;
   transition:
-    opacity 0.3s ease,
-    visibility 0s linear 0.3s;
+    opacity $sidebar-slide,
+    visibility 0s linear $sidebar-slide-time;
 }
 
 .sidebar-backdrop.is-open {
   visibility: visible;
   opacity: 1;
-  transition: opacity 0.3s ease;
+  transition: opacity $sidebar-slide;
 }
 
 // The drawer scrolls itself, so the page behind it should not.

_includes/footer.liquid

@@ -53,6 +53,10 @@
 
   backdrop.addEventListener('click', close);
   document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape') close();
+    if (!open || event.key !== 'Escape') return;
+    // The press closed the drawer, so nothing else should also act on it.
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    close();
   });
 </script>

project-terms.txt

@@ -2,6 +2,7 @@ Aftertabs
 Anson
 autolinks
 backref
+bento
 bibtex
 biomejs
 blockified