Use runed media query

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte

@@ -16,7 +16,7 @@
     interface Props {
         isCommandOpen: boolean;
         isSidebarOpen: boolean;
-        isMediumScreen: boolean;
+        isMediumScreen?: boolean;
     }
 
     let { isCommandOpen = $bindable(), isSidebarOpen = $bindable(), isMediumScreen }: Props = $props();

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Sidebar.svelte

@@ -3,7 +3,7 @@
     import type { NavigationItem } from '../../../routes';
 
     interface Props {
-        isLargeScreen: boolean;
+        isLargeScreen?: boolean;
         isSidebarOpen?: boolean;
         routes: NavigationItem[];
     }

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/SidebarMenuItem.svelte

@@ -5,8 +5,8 @@
 
     type Props = HTMLAnchorAttributes & {
         icon: Component;
-        isLargeScreen: boolean;
-        isSidebarOpen: boolean;
+        isLargeScreen?: boolean;
+        isSidebarOpen?: boolean;
         title: string;
     };
 

src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte

@@ -29,9 +29,9 @@
 
     let isSidebarOpen = persisted('sidebar-open', false);
     let isCommandOpen = $state(false);
-    const isSmallScreen = new MediaQuery('(min-width: 640px)');
-    const isMediumScreen = new MediaQuery('(min-width: 768px)');
-    const isLargeScreen = new MediaQuery('(min-width: 1024px)');
+    const isSmallScreenQuery = new MediaQuery('(min-width: 640px)');
+    const isMediumScreenQuery = new MediaQuery('(min-width: 768px)');
+    const isLargeScreenQuery = new MediaQuery('(min-width: 1024px)');
 
     setModelValidator(validate);
     useMiddleware(async (ctx, next) => {
@@ -82,7 +82,7 @@
     // Close Sidebar on page change on mobile
     // UPGRADE
     page.subscribe(() => {
-        if (isSmallScreen.matches) {
+        if (isSmallScreenQuery.matches) {
             isSidebarOpen.value = false;
         }
     });
@@ -129,9 +129,9 @@
 </script>
 
 {#if isAuthenticated}
-    <NavbarLayout bind:isCommandOpen bind:isSidebarOpen={isSidebarOpen.value} isMediumScreen={isMediumScreen.matches || false}></NavbarLayout>
+    <NavbarLayout bind:isCommandOpen bind:isSidebarOpen={isSidebarOpen.value} isMediumScreen={isMediumScreenQuery.matches}></NavbarLayout>
     <div class="flex overflow-hidden pt-16">
-        <SidebarLayout bind:isSidebarOpen={isSidebarOpen.value} isLargeScreen={isLargeScreen.matches || false} routes={filteredRoutes} />
+        <SidebarLayout bind:isSidebarOpen={isSidebarOpen.value} isLargeScreen={isLargeScreenQuery.matches} routes={filteredRoutes} />
 
         <div class="relative h-full w-full overflow-y-auto text-secondary-foreground {isSidebarOpen.value ? 'lg:ml-64' : 'lg:ml-16'}">
             <main>