From 13ec7cc8e3afae3ae26c3fe4abfe46461d726c16 Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Fri, 12 Dec 2025 19:37:43 -0300
Subject: [PATCH] feat: improve sidebar behavior for responsive layout,
 ensuring it opens by default on desktop and closes on mobile, with event
 listener for screen size changes

---
 apps/web/src/routes/(dashboard)/+layout.svelte | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/+layout.svelte b/apps/web/src/routes/(dashboard)/+layout.svelte
index ed236da..68ea086 100644
--- a/apps/web/src/routes/(dashboard)/+layout.svelte
+++ b/apps/web/src/routes/(dashboard)/+layout.svelte
@@ -13,12 +13,23 @@
 	const { children } = $props();
 
 	let sidebarOpen = $state(false);
+	let isDesktop = $state(false);
 	const toggleSidebar = () => (sidebarOpen = !sidebarOpen);
 	const closeSidebar = () => (sidebarOpen = false);
 
 	// No desktop, abrir por padrão; no mobile, começar fechado
 	onMount(() => {
-		sidebarOpen = window.matchMedia('(min-width: 1024px)').matches;
+		const mql = window.matchMedia('(min-width: 1024px)');
+
+		const update = () => {
+			isDesktop = mql.matches;
+		};
+
+		update();
+		sidebarOpen = mql.matches;
+
+		mql.addEventListener('change', update);
+		return () => mql.removeEventListener('change', update);
 	});
 </script>
 
@@ -66,13 +77,13 @@
 			class:-translate-x-full={!sidebarOpen}
 		>
 			<div class="h-full overflow-y-auto">
-				<Sidebar onNavigate={closeSidebar} />
+				<Sidebar onNavigate={() => !isDesktop && closeSidebar()} />
 			</div>
 		</aside>
 
 		<!-- Conteúdo -->
 		<div
-			class="min-w-0 flex-1 transition-[padding] duration-200 {sidebarOpen
+			class="flex min-w-0 flex-1 flex-col justify-between transition-[padding] duration-200 {sidebarOpen
 				? 'lg:pl-72'
 				: 'lg:pl-0'}"
 		>