fix: sidebar states.

src/lib/components/sidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { fade } from 'svelte/transition';
-    import { page } from '$app/state';
+    import { page } from '$app/stores';
     import { app } from '$lib/stores/app';
+    import { fade } from 'svelte/transition';
     import {
         Icon,
         Sidebar,
@@ -71,7 +71,7 @@
         }
     }
 
-    $: state = $isTabletViewport ? 'closed' : getSidebarState();
+    $: state = $isTabletViewport ? 'closed' : getSidebarState($page);
 
     const projectOptions = [
         { name: 'Auth', icon: IconUserGroup, slug: 'auth', category: 'build' },
@@ -89,7 +89,7 @@
     ];
 
     const isSelected = (service: string): boolean => {
-        return page.route.id?.includes(service);
+        return $page.route.id?.includes(service);
     };
 </script>
 

src/lib/helpers/sidebar.ts

@@ -1,7 +1,7 @@
 import { get } from 'svelte/store';
 import { user } from '$lib/stores/user';
 import { sdk } from '$lib/stores/sdk';
-import { page } from '$app/state';
+import type { Page } from '@sveltejs/kit';
 
 const userPreferences = () => get(user)?.prefs;
 
@@ -18,7 +18,7 @@ export function updateSidebarState(state: 'closed' | 'open' | 'icons') {
     }
 }
 
-export function getSidebarState(): 'open' | 'icons' {
+export function getSidebarState(page: Page): 'open' | 'icons' {
     // for spreadsheet
     const isInDatabases = page.route.id?.includes('database-[database]');
     if (isInDatabases) return 'icons';

src/lib/layout/container.svelte

@@ -41,7 +41,7 @@
             margin-block: var(--base-8) !important;
 
             &:first-child {
-                margin-inline: 2.75rem;
+                margin-inline: 4rem;
             }
 
             &.slotSpacing {