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

This commit is contained in:
2025-12-12 19:37:43 -03:00
parent 4f238022cf
commit 13ec7cc8e3

View File

@@ -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'}"
>