Auto close sidebar on viewport size change

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) {

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} />