mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
refactor: admin sidebar (#18276)
This commit is contained in:
Jason Rasmussen
GitHub
parent
4efc41d5d9
commit
4445288758
15 changed files with 103 additions and 55 deletions
43
web/src/lib/components/layouts/AdminPageLayout.svelte
Normal file
43
web/src/lib/components/layouts/AdminPageLayout.svelte
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script lang="ts">
|
||||
import PageContent from '$lib/components/layouts/PageContent.svelte';
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
||||
import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { sidebarStore } from '$lib/stores/sidebar.svelte';
|
||||
import { AppShell, AppShellHeader, AppShellSidebar, NavbarItem, type Size } from '@immich/ui';
|
||||
import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync } from '@mdi/js';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
size?: Size | 'full';
|
||||
buttons?: Snippet;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let { title, size, buttons, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<AppShell>
|
||||
<AppShellHeader>
|
||||
<NavigationBar showUploadButton={false} noBorder />
|
||||
</AppShellHeader>
|
||||
<AppShellSidebar bind:open={sidebarStore.isOpen}>
|
||||
<div class="h-full flex flex-col justify-between gap-2">
|
||||
<div class="flex flex-col pt-8 pe-4 gap-1">
|
||||
<NavbarItem title={$t('users')} href={AppRoute.ADMIN_USERS} icon={mdiAccountMultipleOutline} />
|
||||
<NavbarItem title={$t('jobs')} href={AppRoute.ADMIN_JOBS} icon={mdiSync} />
|
||||
<NavbarItem title={$t('settings')} href={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
|
||||
<NavbarItem title={$t('external_libraries')} href={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
|
||||
<NavbarItem title={$t('server_stats')} href={AppRoute.ADMIN_STATS} icon={mdiServer} />
|
||||
</div>
|
||||
|
||||
<div class="mb-2 me-4">
|
||||
<BottomInfo />
|
||||
</div>
|
||||
</div>
|
||||
</AppShellSidebar>
|
||||
|
||||
<PageContent {title} {size} {buttons} {children} />
|
||||
</AppShell>
|
||||
26
web/src/lib/components/layouts/PageContent.svelte
Normal file
26
web/src/lib/components/layouts/PageContent.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script lang="ts">
|
||||
import { Container, Scrollable, type Size } from '@immich/ui';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
id?: string;
|
||||
title?: string;
|
||||
size?: Size | 'full';
|
||||
buttons?: Snippet;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let { title, size, buttons, children, id }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="flex h-16 w-full place-items-center justify-between border-b p-2">
|
||||
<div class="font-medium outline-none" tabindex="-1" {id}>{title}</div>
|
||||
{@render buttons?.()}
|
||||
</div>
|
||||
<Scrollable class="grow">
|
||||
<Container {size} class="flex flex-col p-4">
|
||||
{@render children?.()}
|
||||
</Container>
|
||||
</Scrollable>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
<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';
|
||||
|
|
@ -16,7 +15,6 @@
|
|||
title?: string | undefined;
|
||||
description?: string | undefined;
|
||||
scrollbar?: boolean;
|
||||
admin?: boolean;
|
||||
use?: ActionArray;
|
||||
header?: Snippet;
|
||||
sidebar?: Snippet;
|
||||
|
|
@ -30,7 +28,6 @@
|
|||
title = undefined,
|
||||
description = undefined,
|
||||
scrollbar = true,
|
||||
admin = false,
|
||||
use = [],
|
||||
header,
|
||||
sidebar,
|
||||
|
|
@ -58,8 +55,6 @@
|
|||
>
|
||||
{#if sidebar}
|
||||
{@render sidebar()}
|
||||
{:else if admin}
|
||||
<AdminSideBar />
|
||||
{:else}
|
||||
<SideBar />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -30,10 +30,12 @@
|
|||
|
||||
interface Props {
|
||||
showUploadButton?: boolean;
|
||||
onUploadClick: () => void;
|
||||
onUploadClick?: () => void;
|
||||
// TODO: remove once this is only used in <AppShellHeader>
|
||||
noBorder?: boolean;
|
||||
}
|
||||
|
||||
let { showUploadButton = true, onUploadClick }: Props = $props();
|
||||
let { showUploadButton = true, onUploadClick, noBorder = false }: Props = $props();
|
||||
|
||||
let shouldShowAccountInfoPanel = $state(false);
|
||||
let shouldShowNotificationPanel = $state(false);
|
||||
|
|
@ -55,7 +57,9 @@
|
|||
>
|
||||
<SkipLink text={$t('skip_to_content')} />
|
||||
<div
|
||||
class="grid h-full grid-cols-[theme(spacing.32)_auto] items-center border-b py-2 dark:border-b-immich-dark-gray sidebar:grid-cols-[theme(spacing.64)_auto]"
|
||||
class="grid h-full grid-cols-[theme(spacing.32)_auto] items-center py-2 dark:border-b-immich-dark-gray sidebar:grid-cols-[theme(spacing.64)_auto] {noBorder
|
||||
? ''
|
||||
: 'border-b'}"
|
||||
>
|
||||
<div class="flex flex-row gap-1 mx-4 items-center">
|
||||
<IconButton
|
||||
|
|
@ -103,7 +107,7 @@
|
|||
/>
|
||||
{/if}
|
||||
|
||||
{#if !page.url.pathname.includes('/admin') && showUploadButton}
|
||||
{#if !page.url.pathname.includes('/admin') && showUploadButton && onUploadClick}
|
||||
<Button
|
||||
leadingIcon={mdiTrayArrowUp}
|
||||
onclick={onUploadClick}
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<script lang="ts">
|
||||
import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
|
||||
import SideBarLink from '$lib/components/shared-components/side-bar/side-bar-link.svelte';
|
||||
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
</script>
|
||||
|
||||
<SideBarSection ariaLabel={$t('primary')}>
|
||||
<SideBarLink title={$t('users')} routeId={AppRoute.ADMIN_USERS} icon={mdiAccountMultipleOutline} />
|
||||
<SideBarLink title={$t('jobs')} routeId={AppRoute.ADMIN_JOBS} icon={mdiSync} />
|
||||
<SideBarLink title={$t('settings')} routeId={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
|
||||
<SideBarLink title={$t('external_libraries')} routeId={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
|
||||
<SideBarLink title={$t('server_stats')} routeId={AppRoute.ADMIN_STATS} icon={mdiServer} />
|
||||
|
||||
<BottomInfo />
|
||||
</SideBarSection>
|
||||
Loading…
Add table
Add a link
Reference in a new issue