From 17fdd09de7014b2a749fd044e998e27cb76e5c93 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 3 Feb 2025 13:38:12 +0100
Subject: [PATCH] Add tablet viewport check

---
 src/lib/components/navbar.svelte  | 7 ++++++-
 src/lib/components/sidebar.svelte | 6 ++----
 src/lib/stores/viewport.ts        | 5 +++++
 src/routes/+layout.svelte         | 3 ++-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 23ef38d6d..c23242628 100644
--- a/src/lib/components/navbar.svelte
+++ b/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;
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 9b451ccbe..73b25e605 100644
--- a/src/lib/components/sidebar.svelte
+++ b/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);
 
diff --git a/src/lib/stores/viewport.ts b/src/lib/stores/viewport.ts
index 7a4411d6f..159eb7c9d 100644
--- a/src/lib/stores/viewport.ts
+++ b/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
+        );
     }
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e46c874d5..fc61a3179 100644
--- a/src/routes/+layout.svelte
+++ b/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 />