CaZzzer/amqtrain
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

global player pt. 11 fix hiding sidebar

Browse Source
This commit is contained in:
Yura
2026-02-06 02:22:45 -08:00
parent c5c402a6b4
commit 2801ca7a9a
1 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/lib/components/GlobalPlayer.svelte
View File

@@ -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) -->