From 72acec7e180941f04afb84d72e017c3566c86953 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Jul 2025 13:22:10 +0530
Subject: [PATCH] fix: sidebar states.

---
 src/lib/components/sidebar.svelte | 8 ++++----
 src/lib/helpers/sidebar.ts        | 4 ++--
 src/lib/layout/container.svelte   | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 732c43555..4356837d7 100644
--- a/src/lib/components/sidebar.svelte
+++ b/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>
 
diff --git a/src/lib/helpers/sidebar.ts b/src/lib/helpers/sidebar.ts
index e3c6b0c3c..eda2de3f7 100644
--- a/src/lib/helpers/sidebar.ts
+++ b/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';
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 88b36e041..23a7cff42 100644
--- a/src/lib/layout/container.svelte
+++ b/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 {