From 2801ca7a9a85d8c65069b874f31db52acf784fed Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Fri, 6 Feb 2026 02:22:45 -0800
Subject: [PATCH] global player pt. 11 fix hiding sidebar

---
 src/lib/components/GlobalPlayer.svelte | 53 ++++++++++++++++----------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/GlobalPlayer.svelte b/src/lib/components/GlobalPlayer.svelte
index e5830b5..54f065f 100644
--- a/src/lib/components/GlobalPlayer.svelte
+++ b/src/lib/components/GlobalPlayer.svelte
@@ -522,28 +522,34 @@
 		{/if}
 	</div>
 {:else}
-	<!-- Desktop: right sidebar, collapsible -->
-	<aside
-		class="fixed right-0 top-0 z-40 h-dvh w-85 border-l bg-background/95 backdrop-blur"
+	<!-- Desktop: in-flow right column, collapsible -->
+	<div
+		class="pointer-events-none fixed inset-y-0 right-0 z-30 flex justify-end"
 	>
-		<div class="flex items-center gap-2 border-b px-3 py-3">
-			<div class="min-w-0 flex-1">
-				<div class="truncate text-sm font-semibold">Player</div>
-				<div class="truncate text-xs text-muted-foreground">
-					{nowPlayingLabel()}
+		<!-- Spacer only: reserved width when open so page content doesn't sit under the sidebar -->
+		{#if snap.uiOpen}
+			<div class="pointer-events-none w-[340px]"></div>
+		{/if}
+	</div>
+
+	<aside
+		class="fixed right-0 top-0 z-40 h-dvh border-l bg-background/95 backdrop-blur transition-[width,transform] duration-200"
+		style={snap.uiOpen
+			? "width: 340px; transform: translateX(0);"
+			: "width: 0px; transform: translateX(100%);"}
+		aria-hidden={!snap.uiOpen}
+	>
+		<!-- Keep header visible only when open -->
+		{#if snap.uiOpen}
+			<div class="flex items-center gap-2 border-b px-3 py-3">
+				<div class="min-w-0 flex-1">
+					<div class="truncate text-sm font-semibold">Player</div>
+					<div class="truncate text-xs text-muted-foreground">
+						{nowPlayingLabel()}
+					</div>
 				</div>
 			</div>
 
-			<button
-				class="rounded border px-2 py-1 text-sm"
-				type="button"
-				onclick={() => setUiOpen(!snap.uiOpen)}
-			>
-				{snap.uiOpen ? "Hide" : "Show"}
-			</button>
-		</div>
-
-		{#if uiVisible}
 			<div class="flex h-[calc(100dvh-49px)] flex-col">
 				<div class="space-y-2 px-3 py-3">
 					<div class="flex items-center justify-between gap-2">
@@ -666,8 +672,15 @@
 		{/if}
 	</aside>
 
-	<!-- Offset page content so it doesn't sit under the sidebar -->
-	<div class="pointer-events-none fixed right-0 top-0 h-dvh w-85"></div>
+	<!-- Toggle button lives outside the sidebar so it still works when hidden -->
+	<button
+		type="button"
+		class="fixed right-3 top-3 z-50 rounded border bg-background/95 px-2 py-1 text-sm backdrop-blur"
+		onclick={() => toggleUiOpen()}
+		aria-label={snap.uiOpen ? "Hide player" : "Show player"}
+	>
+		{snap.uiOpen ? "Hide" : "Show"}
+	</button>
 {/if}
 
 <!-- Single global audio element (hidden but functional) -->