mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
88 lines
2.6 KiB
Svelte
88 lines
2.6 KiB
Svelte
<script lang="ts" module>
|
|
export const headerId = 'user-page-header';
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { useActions, type ActionArray } from '$lib/actions/use-actions';
|
|
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
|
import AdminSideBar from '$lib/components/shared-components/side-bar/admin-side-bar.svelte';
|
|
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
|
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
hideNavbar?: boolean;
|
|
showUploadButton?: boolean;
|
|
title?: string | undefined;
|
|
description?: string | undefined;
|
|
scrollbar?: boolean;
|
|
admin?: boolean;
|
|
use?: ActionArray;
|
|
header?: Snippet;
|
|
sidebar?: Snippet;
|
|
buttons?: Snippet;
|
|
children?: Snippet;
|
|
}
|
|
|
|
let {
|
|
hideNavbar = false,
|
|
showUploadButton = false,
|
|
title = undefined,
|
|
description = undefined,
|
|
scrollbar = true,
|
|
admin = false,
|
|
use = [],
|
|
header,
|
|
sidebar,
|
|
buttons,
|
|
children,
|
|
}: Props = $props();
|
|
|
|
let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar p-2' : 'scrollbar-hidden');
|
|
let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full');
|
|
</script>
|
|
|
|
<header>
|
|
{#if !hideNavbar}
|
|
<NavigationBar {showUploadButton} onUploadClick={() => openFileUploadDialog()} />
|
|
{/if}
|
|
|
|
{@render header?.()}
|
|
</header>
|
|
<div
|
|
tabindex="-1"
|
|
class="relative z-0 grid grid-cols-[theme(spacing.0)_auto] overflow-hidden sidebar:grid-cols-[theme(spacing.64)_auto]
|
|
{hideNavbar ? 'h-dvh' : 'h-[calc(100dvh-var(--navbar-height))]'}
|
|
{hideNavbar ? 'pt-[var(--navbar-height)]' : ''}
|
|
{hideNavbar ? 'max-md:pt-[var(--navbar-height-md)]' : ''}"
|
|
>
|
|
{#if sidebar}
|
|
{@render sidebar()}
|
|
{:else if admin}
|
|
<AdminSideBar />
|
|
{:else}
|
|
<SideBar />
|
|
{/if}
|
|
|
|
<main class="relative">
|
|
<div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto" use:useActions={use}>
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
{#if title || buttons}
|
|
<div
|
|
class="absolute flex h-16 w-full place-items-center justify-between border-b p-2 dark:border-immich-dark-gray dark:text-immich-dark-fg"
|
|
>
|
|
<div class="flex gap-2 items-center">
|
|
{#if title}
|
|
<div class="font-medium outline-none" tabindex="-1" id={headerId}>{title}</div>
|
|
{/if}
|
|
{#if description}
|
|
<p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
|
|
{/if}
|
|
</div>
|
|
{@render buttons?.()}
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
</div>
|