fix(web): increase sidebar breakpoint (#17436)

web/src/lib/stores/mobile-device.svelte.ts

@@ -2,6 +2,7 @@ import { MediaQuery } from 'svelte/reactivity';
 
 const pointerCoarse = new MediaQuery('pointer:coarse');
 const maxMd = new MediaQuery('max-width: 767px');
+const sidebar = new MediaQuery(`min-width: 850px`);
 
 export const mobileDevice = {
   get pointerCoarse() {
@@ -10,4 +11,7 @@ export const mobileDevice = {
   get maxMd() {
     return maxMd.current;
   },
+  get isFullSidebar() {
+    return sidebar.current;
+  },
 };

web/src/lib/stores/side-bar.svelte.ts

@@ -1 +0,0 @@
-export const isSidebarOpen = $state({ value: false });

web/src/lib/stores/sidebar.svelte.ts

@@ -0,0 +1,21 @@
+import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+
+class SidebarStore {
+  isOpen = $derived.by(() => mobileDevice.isFullSidebar);
+
+  /**
+   * Reset the sidebar visibility to the default, based on the current screen width.
+   */
+  reset() {
+    this.isOpen = mobileDevice.isFullSidebar;
+  }
+
+  /**
+   * Toggles the sidebar visibility, if available at the current screen width.
+   */
+  toggle() {
+    this.isOpen = mobileDevice.isFullSidebar ? true : !this.isOpen;
+  }
+}
+
+export const sidebarStore = new SidebarStore();