mirror of
https://github.com/immich-app/immich.git
synced 2024-12-29 15:11:58 +00:00
refactor(web): sidebar menu links (#7891)
This commit is contained in:
Michel Heusschen
GitHub
parent
6bfa1fceec
commit
c24b6cf617
3 changed files with 70 additions and 104 deletions
|
|
@ -1,6 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.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 StatusBox from '$lib/components/shared-components/status-box.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
|
|
@ -8,32 +7,15 @@
|
|||
</script>
|
||||
|
||||
<SideBarSection>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT} draggable="false">
|
||||
<SideBarButton
|
||||
title="Users"
|
||||
icon={mdiAccountMultipleOutline}
|
||||
isSelected={$page.route.id === AppRoute.ADMIN_USER_MANAGEMENT}
|
||||
/>
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_JOBS} draggable="false">
|
||||
<SideBarButton title="Jobs" icon={mdiSync} isSelected={$page.route.id === AppRoute.ADMIN_JOBS} />
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_SETTINGS} draggable="false">
|
||||
<SideBarButton title="Settings" icon={mdiCog} isSelected={$page.route.id === AppRoute.ADMIN_SETTINGS} />
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_LIBRARY_MANAGEMENT} draggable="false">
|
||||
<SideBarButton
|
||||
title="External Libraries"
|
||||
icon={mdiBookshelf}
|
||||
isSelected={$page.route.id === AppRoute.ADMIN_LIBRARY_MANAGEMENT}
|
||||
/>
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_STATS} draggable="false">
|
||||
<SideBarButton title="Server Stats" icon={mdiServer} isSelected={$page.route.id === AppRoute.ADMIN_STATS} />
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="off" href={AppRoute.ADMIN_REPAIR} draggable="false">
|
||||
<SideBarButton title="Repair" icon={mdiTools} isSelected={$page.route.id === AppRoute.ADMIN_REPAIR} />
|
||||
</a>
|
||||
<nav aria-label="Primary">
|
||||
<SideBarLink title="Users" routeId={AppRoute.ADMIN_USER_MANAGEMENT} icon={mdiAccountMultipleOutline} />
|
||||
<SideBarLink title="Jobs" routeId={AppRoute.ADMIN_JOBS} icon={mdiSync} />
|
||||
<SideBarLink title="Settings" routeId={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
|
||||
<SideBarLink title="External Libraries" routeId={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
|
||||
<SideBarLink title="Server Stats" routeId={AppRoute.ADMIN_STATS} icon={mdiServer} />
|
||||
<SideBarLink title="Repair" routeId={AppRoute.ADMIN_REPAIR} icon={mdiTools} preloadData={false} />
|
||||
</nav>
|
||||
|
||||
<div class="mb-6 mt-auto">
|
||||
<StatusBox />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,27 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiInformationOutline } from '@mdi/js';
|
||||
import { resolveRoute } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
export let title: string;
|
||||
export let routeId: string;
|
||||
export let icon: string;
|
||||
export let isSelected: boolean;
|
||||
export let flippedLogo = false;
|
||||
export let isSelected = false;
|
||||
export let preloadData = true;
|
||||
|
||||
let showMoreInformation = false;
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
selected: void;
|
||||
}>();
|
||||
const onButtonClicked = () => dispatch('selected');
|
||||
$: routePath = resolveRoute(routeId, {});
|
||||
$: isSelected = $page.route.id === routeId;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
on:click={onButtonClicked}
|
||||
on:keydown={onButtonClicked}
|
||||
<a
|
||||
href={routePath}
|
||||
data-sveltekit-preload-data={preloadData ? 'hover' : 'off'}
|
||||
draggable="false"
|
||||
aria-current={isSelected ? 'page' : undefined}
|
||||
class="flex w-full place-items-center justify-between gap-4 rounded-r-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-immich-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary
|
||||
{isSelected
|
||||
? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/25 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
|
||||
|
|
@ -29,14 +30,15 @@
|
|||
"
|
||||
>
|
||||
<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
|
||||
<Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} />
|
||||
<p class="text-sm font-medium">{title}</p>
|
||||
<Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} ariaHidden />
|
||||
<span class="text-sm font-medium">{title}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-0 overflow-hidden transition-[height] delay-1000 duration-100 sm:group-hover:h-auto group-hover:sm:overflow-visible md:h-auto md:overflow-visible"
|
||||
>
|
||||
{#if $$slots.moreInformation}
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="relative flex cursor-default select-none justify-center"
|
||||
on:mouseenter={() => (showMoreInformation = true)}
|
||||
|
|
@ -60,4 +62,4 @@
|
|||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { locale, sidebarSettings } from '$lib/stores/preferences.store';
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { getAlbumCount, getAssetStatistics } from '@immich/sdk';
|
||||
|
|
@ -17,11 +16,10 @@
|
|||
mdiMap,
|
||||
mdiTrashCanOutline,
|
||||
} from '@mdi/js';
|
||||
import { AppRoute } from '../../../constants';
|
||||
import LoadingSpinner from '../loading-spinner.svelte';
|
||||
import StatusBox from '../status-box.svelte';
|
||||
import SideBarButton from './side-bar-button.svelte';
|
||||
import SideBarSection from './side-bar-section.svelte';
|
||||
import SideBarLink from './side-bar-link.svelte';
|
||||
|
||||
const getStats = (dto: Parameters<typeof getAssetStatistics>[0]) => getAssetStatistics(dto);
|
||||
|
||||
|
|
@ -33,18 +31,18 @@
|
|||
}
|
||||
};
|
||||
|
||||
const isFavoritesSelected = $page.route.id === '/(user)/favorites';
|
||||
const isPhotosSelected = $page.route.id === '/(user)/photos';
|
||||
const isSharingSelected = $page.route.id === '/(user)/sharing';
|
||||
const isTrashSelected = $page.route.id === '/(user)/trash';
|
||||
let isFavoritesSelected: boolean;
|
||||
let isPhotosSelected: boolean;
|
||||
let isSharingSelected: boolean;
|
||||
</script>
|
||||
|
||||
<SideBarSection>
|
||||
<a data-sveltekit-preload-data="hover" data-sveltekit-noscroll href={AppRoute.PHOTOS} draggable="false">
|
||||
<SideBarButton
|
||||
<nav aria-label="Primary">
|
||||
<SideBarLink
|
||||
title="Photos"
|
||||
routeId="/(user)/photos"
|
||||
bind:isSelected={isPhotosSelected}
|
||||
icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
|
||||
isSelected={isPhotosSelected}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getStats({ isArchived: false })}
|
||||
|
|
@ -56,29 +54,24 @@
|
|||
</div>
|
||||
{/await}
|
||||
</svelte:fragment>
|
||||
</SideBarButton>
|
||||
</a>
|
||||
{#if $featureFlags.search}
|
||||
<a data-sveltekit-preload-data="hover" data-sveltekit-noscroll href={AppRoute.EXPLORE} draggable="false">
|
||||
<SideBarButton title="Explore" icon={mdiMagnify} isSelected={$page.route.id === '/(user)/explore'} />
|
||||
</a>
|
||||
{/if}
|
||||
{#if $featureFlags.map}
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.MAP} draggable="false">
|
||||
<SideBarButton title="Map" icon={mdiMap} isSelected={$page.route.id === '/(user)/map'} />
|
||||
</a>
|
||||
{/if}
|
||||
{#if $sidebarSettings.people}
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.PEOPLE} draggable="false">
|
||||
<SideBarButton title="People" icon={mdiAccount} isSelected={$page.route.id === '/(user)/people'} />
|
||||
</a>
|
||||
{/if}
|
||||
{#if $sidebarSettings.sharing}
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
|
||||
<SideBarButton
|
||||
</SideBarLink>
|
||||
{#if $featureFlags.search}
|
||||
<SideBarLink title="Explore" routeId="/(user)/explore" icon={mdiMagnify} />
|
||||
{/if}
|
||||
|
||||
{#if $featureFlags.map}
|
||||
<SideBarLink title="Map" routeId="/(user)/map" icon={mdiMap} />
|
||||
{/if}
|
||||
|
||||
{#if $sidebarSettings.people}
|
||||
<SideBarLink title="People" routeId="/(user)/people" icon={mdiAccount} />
|
||||
{/if}
|
||||
{#if $sidebarSettings.sharing}
|
||||
<SideBarLink
|
||||
title="Sharing"
|
||||
routeId="/(user)/sharing"
|
||||
icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
|
||||
isSelected={isSharingSelected}
|
||||
bind:isSelected={isSharingSelected}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await handleAlbumCount()}
|
||||
|
|
@ -89,19 +82,18 @@
|
|||
</div>
|
||||
{/await}
|
||||
</svelte:fragment>
|
||||
</SideBarButton>
|
||||
</a>
|
||||
{/if}
|
||||
</SideBarLink>
|
||||
{/if}
|
||||
|
||||
<div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
|
||||
<p class="hidden p-6 group-hover:sm:block md:block">LIBRARY</p>
|
||||
<hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
|
||||
</div>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
|
||||
<SideBarButton
|
||||
<div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
|
||||
<p class="hidden p-6 group-hover:sm:block md:block">LIBRARY</p>
|
||||
<hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
|
||||
</div>
|
||||
<SideBarLink
|
||||
title="Favorites"
|
||||
routeId="/(user)/favorites"
|
||||
icon={isFavoritesSelected ? mdiHeartMultiple : mdiHeartMultipleOutline}
|
||||
isSelected={isFavoritesSelected}
|
||||
bind:isSelected={isFavoritesSelected}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getStats({ isFavorite: true })}
|
||||
|
|
@ -113,15 +105,8 @@
|
|||
</div>
|
||||
{/await}
|
||||
</svelte:fragment>
|
||||
</SideBarButton>
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
|
||||
<SideBarButton
|
||||
title="Albums"
|
||||
icon={mdiImageAlbum}
|
||||
flippedLogo={true}
|
||||
isSelected={$page.route.id === '/(user)/albums'}
|
||||
>
|
||||
</SideBarLink>
|
||||
<SideBarLink title="Albums" routeId="/(user)/albums" icon={mdiImageAlbum} flippedLogo>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await handleAlbumCount()}
|
||||
<LoadingSpinner />
|
||||
|
|
@ -131,10 +116,9 @@
|
|||
</div>
|
||||
{/await}
|
||||
</svelte:fragment>
|
||||
</SideBarButton>
|
||||
</a>
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ARCHIVE} draggable="false">
|
||||
<SideBarButton title="Archive" icon={mdiArchiveArrowDownOutline} isSelected={$page.route.id === '/(user)/archive'}>
|
||||
</SideBarLink>
|
||||
|
||||
<SideBarLink title="Archive" routeId="/(user)/archive" icon={mdiArchiveArrowDownOutline}>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getStats({ isArchived: true })}
|
||||
<LoadingSpinner />
|
||||
|
|
@ -145,12 +129,10 @@
|
|||
</div>
|
||||
{/await}
|
||||
</svelte:fragment>
|
||||
</SideBarButton>
|
||||
</a>
|
||||
</SideBarLink>
|
||||
|
||||
{#if $featureFlags.trash}
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.TRASH} draggable="false">
|
||||
<SideBarButton title="Trash" icon={mdiTrashCanOutline} isSelected={isTrashSelected}>
|
||||
{#if $featureFlags.trash}
|
||||
<SideBarLink title="Trash" routeId="/(user)/trash" icon={mdiTrashCanOutline}>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getStats({ isTrashed: true })}
|
||||
<LoadingSpinner />
|
||||
|
|
@ -161,9 +143,9 @@
|
|||
</div>
|
||||
{/await}
|
||||
</svelte:fragment>
|
||||
</SideBarButton>
|
||||
</a>
|
||||
{/if}
|
||||
</SideBarLink>
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<!-- Status Box -->
|
||||
<div class="mb-6 mt-auto">
|
||||
|
|
|
|||
Loading…
Reference in a new issue