diff --git a/web/workspace/src/app.css b/web/workspace/src/app.css index 9f9da487..83f0df2e 100644 --- a/web/workspace/src/app.css +++ b/web/workspace/src/app.css @@ -124,7 +124,7 @@ @layer layout { .workspace-layout { display: grid; - grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); + grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100vw; height: 100dvh; @@ -133,9 +133,6 @@ overflow: hidden; min-width: 0; } - .workspace-layout.sidebar-collapsed { - grid-template-columns: max-content minmax(0, 1fr); - } .workspace-topbar { grid-column: 2; grid-row: 1; @@ -206,6 +203,7 @@ .global-sidebar { grid-column: 1; grid-row: 1; + width: auto; border-right: 0; border-bottom: 1px solid var(--line); } @@ -217,12 +215,10 @@ min-height: 100dvh; overflow: visible; } - .workspace-layout.sidebar-collapsed { - grid-template-columns: 1fr; - } .workspace-sidebar { grid-column: 1; grid-row: 1; + width: auto; border-right: 0; border-bottom: 1px solid var(--line); } @@ -243,6 +239,7 @@ .global-sidebar { grid-column: 1; grid-row: 1 / 3; + width: clamp(220px, 20vw, 280px); min-width: 0; min-height: 0; overflow-y: auto; @@ -256,6 +253,7 @@ .workspace-sidebar { grid-column: 1; grid-row: 1 / 3; + width: clamp(220px, 20vw, 280px); align-self: stretch; min-width: 0; min-height: 0; @@ -263,6 +261,10 @@ padding: var(--space-4) var(--space-3); border-right: 1px solid var(--line); } + .workspace-sidebar.collapsed { + width: max-content; + } + .sidebar-header { display: grid; gap: var(--space-2); diff --git a/web/workspace/src/lib/workspace/sidebar/context.ts b/web/workspace/src/lib/workspace/sidebar/context.ts index 1b9b3f66..b535ef09 100644 --- a/web/workspace/src/lib/workspace/sidebar/context.ts +++ b/web/workspace/src/lib/workspace/sidebar/context.ts @@ -6,7 +6,6 @@ export type SidebarSnippet = Snippet<[]>; export type SidebarController = { setSidebar(snippet: SidebarSnippet): void; clearSidebar(snippet: SidebarSnippet): void; - setCollapsed(collapsed: boolean): void; }; export const SIDEBAR_CONTEXT = Symbol("yoi-sidebar-context"); diff --git a/web/workspace/src/routes/+layout.svelte b/web/workspace/src/routes/+layout.svelte index 706d596f..c7493dbf 100644 --- a/web/workspace/src/routes/+layout.svelte +++ b/web/workspace/src/routes/+layout.svelte @@ -9,7 +9,6 @@ let { children }: LayoutProps = $props(); let sidebar = $state(null); - let sidebarCollapsed = $state(false); setContext(SIDEBAR_CONTEXT, { setSidebar(snippet: SidebarSnippet) { @@ -17,17 +16,13 @@ }, clearSidebar(snippet: SidebarSnippet) { if (sidebar === snippet) sidebar = null; - sidebarCollapsed = false; - }, - setCollapsed(collapsed: boolean) { - sidebarCollapsed = collapsed; }, }); -
+
{#if sidebar} {@render sidebar()} {:else} diff --git a/web/workspace/src/routes/w/[workspaceId]/+layout.svelte b/web/workspace/src/routes/w/[workspaceId]/+layout.svelte index d573d76a..48da98f5 100644 --- a/web/workspace/src/routes/w/[workspaceId]/+layout.svelte +++ b/web/workspace/src/routes/w/[workspaceId]/+layout.svelte @@ -2,20 +2,14 @@ import { page } from '$app/state'; import SidebarOverride from '$lib/workspace/sidebar/SidebarOverride.svelte'; import WorkspaceSidebar from '$lib/workspace/sidebar/WorkspaceSidebar.svelte'; - import { getSidebarController } from '$lib/workspace/sidebar/context'; import type { LayoutProps } from './$types'; let { data, children }: LayoutProps = $props(); let sidebarCollapsed = $state(false); - const sidebarController = getSidebarController(); function toggleSidebar() { sidebarCollapsed = !sidebarCollapsed; } - - $effect(() => { - sidebarController.setCollapsed(sidebarCollapsed); - }); {#snippet workspaceSidebar()}