Add tablet viewport check

src/lib/components/navbar.svelte

@@ -77,7 +77,7 @@
 
 <Navbar.Base {...$$props}>
     <div slot="left" class="left">
-        <div class="only-mobile">
+        <div class="only-mobile-tablet">
             <button
                 class="sideNavToggle"
                 on:click={() => {
@@ -276,6 +276,11 @@
             display: none;
         }
     }
+    @media (min-width: 1024px) {
+        .only-mobile-tablet {
+            display: none;
+        }
+    }
 
     :global(.icons div:first-of-type:not(:has(.progress-card))) {
         height: 20px;

src/lib/components/sidebar.svelte

@@ -30,7 +30,7 @@
     import { Feedback } from '$lib/components/feedback';
     import { type ComponentType, onMount } from 'svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
 
     type $$Props = HTMLElement & {
         state?: 'closed' | 'open' | 'icons';
@@ -61,9 +61,7 @@
         }
     }
 
-    onMount(() => {
-        state = isSmallViewport ? 'closed' : getSidebarState();
-    });
+    $: state = $isTabletViewport ? 'closed' : getSidebarState();
 
     $: updateSidebarState(state);
 

src/lib/stores/viewport.ts

@@ -1,11 +1,16 @@
 import { writable } from 'svelte/store';
 
 export const isSmallViewport = writable(false);
+export const isTabletViewport = writable(false);
 
 export function updateViewport() {
     if (typeof window !== 'undefined') {
         isSmallViewport.set(
             typeof window !== 'undefined' ? window.matchMedia('(max-width: 768px)').matches : false
         );
+
+        isTabletViewport.set(
+            typeof window !== 'undefined' ? window.matchMedia('(max-width: 1024px)').matches : false
+        );
     }
 }

src/routes/+layout.svelte

@@ -27,6 +27,7 @@
     }
 
     onMount(async () => {
+        updateViewport();
         // handle sources
         if (isCloud) {
             const urlParams = $page.url.searchParams;
@@ -106,7 +107,7 @@
     }
 </script>
 
-<svelte:window on:resize={updateViewport} />
+<svelte:window on:resize={updateViewport} on:load={updateViewport} />
 
 <Root theme={resolveTheme($app.themeInUse)}>
     <Notifications />