From 948eb0d0fc15f5d0cc135ea727e4f8d9293a0cc2 Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Fri, 6 Mar 2026 22:13:38 +0100
Subject: [PATCH] fix: close sidebar when tapping outside on mobile

Add a semi-transparent backdrop overlay (lg:hidden) behind the sidebar
on mobile. Clicking/tapping the backdrop closes the sidebar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/Layout/Sidebar.svelte | 12 +++++++++++-
 src/routes/+layout.svelte                |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Layout/Sidebar.svelte b/src/lib/components/Layout/Sidebar.svelte
index f8b0ddb..978feb0 100644
--- a/src/lib/components/Layout/Sidebar.svelte
+++ b/src/lib/components/Layout/Sidebar.svelte
@@ -5,9 +5,10 @@
 
 	interface Props {
 		open: boolean;
+		onClose?: () => void;
 	}
 
-	let { open }: Props = $props();
+	let { open, onClose }: Props = $props();
 
 	function setFilter(filter: NoteFilter) {
 		selectedTag.set(null);
@@ -20,6 +21,15 @@
 	}
 </script>
 
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 top-16 z-10 bg-black/30 lg:hidden"
+		onclick={onClose}
+		onkeydown={(e) => { if (e.key === 'Escape') onClose?.(); }}
+	></div>
+{/if}
+
 <aside
 	class="fixed left-0 top-16 z-20 h-[calc(100vh-4rem)] w-64 transform border-r border-[var(--border)] bg-[var(--bg-surface)] transition-transform duration-200 {open ? 'translate-x-0' : '-translate-x-full'}"
 >
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 057f884..808bb0f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -23,7 +23,7 @@
 
 <div class="flex min-h-screen flex-col bg-[var(--bg-base)] text-[var(--text)]">
 	<Header onMenuToggle={() => (sidebarOpen = !sidebarOpen)} />
-	<Sidebar open={sidebarOpen} />
+	<Sidebar open={sidebarOpen} onClose={() => (sidebarOpen = false)} />
 
 	<main class="flex-1 pt-4 transition-all {sidebarOpen ? 'lg:ml-64' : ''}">
 		<div class="mx-auto max-w-7xl px-4">