feat: click off sidebar on small windows closes it

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();
+});

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 {