shelving 1.210.0 → 1.211.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.210.0",
+	"version": "1.211.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/layout/SidebarLayout.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
 export interface SidebarLayoutProps {
     /** Content rendered in the fixed-width side column. */
@@ -11,7 +11,8 @@ export interface SidebarLayoutProps {
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - The sidebar collapses above the main content on narrow viewports.
+ * - On narrow viewports the sidebar slides off the left of the screen and is toggled with a "show menu" button.
+ * - The toggle is driven by a hidden checkbox and pure CSS, so it works even when the page ships no client-side JavaScript.
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
 export declare function SidebarLayout({ sidebar, children, right }: SidebarLayoutProps): ReactElement;

package/ui/layout/SidebarLayout.js

@@ -1,16 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+import { useId } from "react";
 import { getClass } from "../util/css.js";
 import { LAYOUT_CSS } from "./Layout.js";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - The sidebar collapses above the main content on narrow viewports.
+ * - On narrow viewports the sidebar slides off the left of the screen and is toggled with a "show menu" button.
+ * - The toggle is driven by a hidden checkbox and pure CSS, so it works even when the page ships no client-side JavaScript.
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }) {
-    const sidebarEl = (_jsx("nav", { className: SIDEBAR_LAYOUT_CSS.sidebar, children: sidebar }, "sidebar"));
-    const contentEl = (_jsx("div", { className: getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content), children: _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children }) }, "content"));
-    return (_jsx("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout), children: right ? [contentEl, sidebarEl] : [sidebarEl, contentEl] }));
+    // Ties the toggle checkbox to its `<label>` buttons — `useId()` is stable during static (non-hydrated) rendering.
+    const id = useId();
+    const sidebarEl = (_jsxs("nav", { className: SIDEBAR_LAYOUT_CSS.sidebar, children: [_jsx("label", { htmlFor: id, title: "Close menu", className: SIDEBAR_LAYOUT_CSS.close, children: _jsx(XMarkIcon, {}) }), sidebar] }, "sidebar"));
+    const contentEl = (_jsxs("div", { className: getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content), children: [_jsx("label", { htmlFor: id, title: "Show menu", className: SIDEBAR_LAYOUT_CSS.show, children: _jsx(Bars3Icon, {}) }), _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children })] }, "content"));
+    return (_jsxs("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout), children: [_jsx("input", { type: "checkbox", id: id, className: SIDEBAR_LAYOUT_CSS.toggle, "aria-label": "Show or hide menu" }), right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]] }));
 }
 export { SIDEBAR_LAYOUT_CSS };

package/ui/layout/SidebarLayout.module.css

@@ -5,6 +5,10 @@
  * here we override its block-level behaviour so the sidebar and content each scroll independently.
  * The inner `.content` element reuses the `.layout` class too so it picks up the standard
  * layout padding, safe-area insets, and `overflow: hidden auto` scroll behaviour.
+ *
+ * On narrow viewports the sidebar becomes an off-canvas drawer: it slides off the left edge of the
+ * screen and is toggled by the hidden `.toggle` checkbox via its `.show` / `.close` `<label>` buttons.
+ * Driving the drawer with a checkbox + CSS means it works even when the page ships no client-side JS.
  */
 
 .main {
@@ -34,14 +38,77 @@
 	margin: 0 auto;
 }
 
-/* On narrow viewports collapse to a single column with the sidebar above. */
+/* Toggle checkbox — hidden entirely on wide viewports (see media query for the narrow-viewport state). */
+.toggle {
+	display: none;
+}
+
+/* Menu toggle buttons — hidden by default, only shown on narrow viewports (see media query below). */
+.show,
+.close {
+	display: none;
+	width: fit-content;
+	margin: 0;
+	align-items: center;
+	justify-content: center;
+	padding: var(--space-small);
+	border-radius: var(--radius-xsmall);
+	color: var(--color-text);
+	cursor: pointer;
+
+	& svg {
+		width: var(--size-icon);
+		height: var(--size-icon);
+	}
+
+	&:hover {
+		background: var(--color-surface);
+	}
+}
+
+/* The close button sits at the top of the sidebar, aligned to its trailing edge. */
+.close {
+	margin-inline-start: auto;
+	margin-bottom: var(--space-xsmall);
+}
+
+/* On narrow viewports the sidebar becomes an off-canvas drawer that slides in from the left. */
 @media (max-width: 48rem) {
 	.main {
 		grid-template-columns: 1fr;
 	}
 	.sidebar {
-		border-right: none;
-		border-bottom: 1px solid var(--color-border);
-		max-height: 50vh;
+		position: fixed;
+		z-index: 100;
+		inset-block: 0;
+		left: 0;
+		width: var(--sidebar-layout-width, 17.5rem);
+		max-width: 85vw;
+		transform: translateX(-100%);
+		transition: transform var(--duration-normal) ease-in-out;
+	}
+	/* Checked checkbox → drawer slides on screen. */
+	.toggle:checked ~ .sidebar {
+		transform: translateX(0);
+		box-shadow: 0 0 1.5rem var(--color-overlay);
+	}
+	/* Keep the checkbox visually hidden but still focusable for keyboard users. */
+	.toggle {
+		display: block;
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+	}
+	.show,
+	.close {
+		display: flex;
+	}
+	/* Forward the checkbox's keyboard focus ring to whichever toggle button is on screen. */
+	.toggle:focus-visible ~ .content .show,
+	.toggle:focus-visible ~ .sidebar .close {
+		outline: var(--stroke-focus) solid var(--color-focus);
+		outline-offset: 2px;
 	}
 }

package/ui/layout/SidebarLayout.tsx

@@ -1,4 +1,5 @@
-import type { ReactElement, ReactNode } from "react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+import { type ReactElement, type ReactNode, useId } from "react";
 import { getClass } from "../util/css.js";
 import { LAYOUT_CSS } from "./Layout.js";
 import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
@@ -15,22 +16,35 @@ export interface SidebarLayoutProps {
 /**
  * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
  * - The sidebar is rendered as `<nav>` — it almost always contains the page's primary navigation.
- * - The sidebar collapses above the main content on narrow viewports.
+ * - On narrow viewports the sidebar slides off the left of the screen and is toggled with a "show menu" button.
+ * - The toggle is driven by a hidden checkbox and pure CSS, so it works even when the page ships no client-side JavaScript.
  * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
  */
 export function SidebarLayout({ sidebar, children, right = false }: SidebarLayoutProps): ReactElement {
+	// Ties the toggle checkbox to its `<label>` buttons — `useId()` is stable during static (non-hydrated) rendering.
+	const id = useId();
+
 	const sidebarEl = (
 		<nav key="sidebar" className={SIDEBAR_LAYOUT_CSS.sidebar}>
+			<label htmlFor={id} title="Close menu" className={SIDEBAR_LAYOUT_CSS.close}>
+				<XMarkIcon />
+			</label>
 			{sidebar}
 		</nav>
 	);
 	const contentEl = (
 		<div key="content" className={getClass(LAYOUT_CSS.layout, SIDEBAR_LAYOUT_CSS.content)}>
+			<label htmlFor={id} title="Show menu" className={SIDEBAR_LAYOUT_CSS.show}>
+				<Bars3Icon />
+			</label>
 			<div className={SIDEBAR_LAYOUT_CSS.contentInner}>{children}</div>
 		</div>
 	);
 	return (
-		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout)}>{right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]}</main>
+		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout)}>
+			<input type="checkbox" id={id} className={SIDEBAR_LAYOUT_CSS.toggle} aria-label="Show or hide menu" />
+			{right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]}
+		</main>
 	);
 }