immich/web/src/lib/components/layouts/user-page-layout.svelte

50 lines
1.6 KiB
Svelte

<script lang="ts">
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
import SideBar from '../shared-components/side-bar/side-bar.svelte';
import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
export let hideNavbar = false;
export let showUploadButton = false;
export let title: string | undefined = undefined;
export let scrollbar = true;
export let admin = false;
$: scrollbarClass = scrollbar ? 'immich-scrollbar p-4 pb-8' : 'scrollbar-hidden';
$: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
</script>
<header>
{#if !hideNavbar}
<NavigationBar {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
{/if}
<slot name="header" />
</header>
<main
class="relative grid h-screen grid-cols-[theme(spacing.18)_auto] overflow-hidden bg-immich-bg pt-[var(--navbar-height)] dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
>
<slot name="sidebar">
{#if admin}
<AdminSideBar />
{:else}
<SideBar />
{/if}
</slot>
<section class="relative">
{#if title}
<div
class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
>
<p class="font-medium">{title}</p>
<slot name="buttons" />
</div>
{/if}
<div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto">
<slot />
</div>
</section>
</main>