From 68fc27a7d034d3856c53a128b2f3e7019fe08e69 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 16 Jan 2025 14:24:46 +0100
Subject: [PATCH] Auto close sidebar on viewport size change

---
 src/lib/components/navbar.svelte |  5 ++++-
 src/lib/layout/shell.svelte      | 12 +++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index fb982794f..e542fbebe 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -97,7 +97,7 @@
 
 <Navbar.Base {...$$props}>
     <div slot="left" class="left">
-        <div class="only-mobile-tablet">
+        <div class="only-mobile">
             <button
                 class="sideNavToggle"
                 on:click={() => {
@@ -300,6 +300,9 @@
         .only-desktop {
             display: block;
         }
+        .only-mobile {
+            display: none;
+        }
     }
 
     @media (min-width: 1024px) {
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index dd0cdd69b..cdf4dfeec 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -5,7 +5,7 @@
     import { log } from '$lib/stores/logs';
     import { wizard } from '$lib/stores/wizard';
     import { activeHeaderAlert } from '$routes/(console)/store';
-    import { setContext } from 'svelte';
+    import { onMount, setContext } from 'svelte';
     import { writable } from 'svelte/store';
     import { showSubNavigation } from '$lib/stores/layout';
     import { organization, organizationList } from '$lib/stores/organization';
@@ -64,6 +64,16 @@
     let showAccountMenu = false;
     let state: undefined | 'open' | 'closed' | 'icons' = 'closed';
     $: state = sideBarIsOpen ? 'open' : 'closed';
+
+    function handleResize() {
+        sideBarIsOpen = false;
+        showAccountMenu = false;
+    }
+
+    onMount(() => {
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    });
 </script>
 
 <svelte:window bind:scrollY={y} />