Refactor auth #65
@@ -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'}"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user