diff options
Diffstat (limited to 'frontend/src/lib/reader/Reader.svelte')
| -rw-r--r-- | frontend/src/lib/reader/Reader.svelte | 19 |
1 files changed, 14 insertions, 5 deletions
diff --git a/frontend/src/lib/reader/Reader.svelte b/frontend/src/lib/reader/Reader.svelte index 2e7e851..0665698 100644 --- a/frontend/src/lib/reader/Reader.svelte +++ b/frontend/src/lib/reader/Reader.svelte @@ -6,10 +6,13 @@ import { fade, slide } from 'svelte/transition'; import CloseReaderButton from './components/CloseReaderButton.svelte'; import ReaderMenuButton from './components/ReaderMenuButton.svelte'; + import ToggleFullscreenButton from './components/ToggleFullscreenButton.svelte'; let { sidebar, children }: { sidebar?: Snippet; children?: Snippet } = $props(); const reader = getReaderContext(); + + let dialog: HTMLDivElement | undefined = $state(); </script> {#if reader.visible} @@ -18,6 +21,7 @@ class="fixed top-0 right-0 bottom-0 left-0 z-10 flex h-full w-full bg-black" transition:fade={fadeDefault} use:trapFocus + bind:this={dialog} > {#if sidebar && reader.sidebar} <aside class="w-[36rem] shrink-0 bg-slate-800" transition:slide={slideXDefault}> @@ -27,11 +31,16 @@ </aside> {/if} <main class="relative flex grow"> - <div class="absolute flex w-full p-1 text-lg [&>*:last-child]:ml-auto"> - {#if sidebar} - <ReaderMenuButton /> - {/if} - <CloseReaderButton /> + <div class="absolute flex w-full p-1 text-lg"> + <div class="flex flex-col gap-1"> + {#if sidebar} + <ReaderMenuButton /> + {/if} + </div> + <div class="ml-auto flex flex-col gap-1"> + <CloseReaderButton /> + <ToggleFullscreenButton {dialog} /> + </div> </div> {@render children?.()} |