From 1206e211d52ed65553b9d77369b81b6b9212ccb5 Mon Sep 17 00:00:00 2001
From: Robert Perce <contact@rperce.net>
Date: Tue, 7 Apr 2026 10:49:23 -0500
Subject: [PATCH] feat: click off sidebar on small windows closes it

---
 e2e/pages/home.spec.ts | 12 ++++++++++++
 src/web/mod.rs         |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/e2e/pages/home.spec.ts b/e2e/pages/home.spec.ts
index 2ab54f2..d852a0e 100644
--- a/e2e/pages/home.spec.ts
+++ b/e2e/pages/home.spec.ts
@@ -99,3 +99,15 @@ test('contact list scrolls (independently) to current contact in center of view'
   // roughly centered is fine, not that fussy about headers and whatnot
   expect(Math.abs(linkPos - (await page.evaluate('window.innerHeight/2') as number))).toBeLessThan(200);
 });
+
+test('clicking off contact list when expanded closes it', async ({ page }) => {
+  await page.setViewportSize({
+    width: 640,
+    height: 1000,
+  });
+  // TODO aria-label
+  await page.locator('#sidebar-show-hide').click();
+  await expect(page.getByRole('button', { name: /add contact/i })).toBeVisible();
+  await page.mouse.click(600, 500);
+  await expect(page.getByRole('button', { name: /add contact/i })).not.toBeVisible();
+});
diff --git a/src/web/mod.rs b/src/web/mod.rs
index 3aa6b89..3a3a47c 100644
--- a/src/web/mod.rs
+++ b/src/web/mod.rs
@@ -112,7 +112,7 @@ impl Layout {
                         a href="/logout" { "Logout" }
                     }
                     section #content {
-                       nav #contacts-sidebar x-bind:class="sidebar ? 'show' : 'hide'" {
+                       nav #contacts-sidebar x-bind:class="sidebar ? 'show' : 'hide'" "x-on:click.self"="sidebar = !sidebar" {
                            ul {
                                li { button hx-post="/contact/new" { "+ Add Contact" } }
                                 @for link in &self.contact_links {