immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-20 09:15:35 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

feat(web): Album preview overview in menu (#13981)

Browse Source
This commit is contained in:
Tim Van Onckelen
2024-12-04 21:38:55 +01:00
committed by GitHub
parent 292182fa7f
commit 5060ee95c2
5 changed files with 106 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
web/src/lib/components/shared-components/side-bar/side-bar-link.svelte
View File

@@ -1,7 +1,10 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { mdiChevronDown, mdiChevronLeft } from '@mdi/js';
import { resolveRoute } from '$app/paths';
import { page } from '$app/stores';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
interface Props {
title: string;
@@ -10,6 +13,9 @@
flippedLogo?: boolean;
isSelected?: boolean;
preloadData?: boolean;
moreInformation?: Snippet;
dropDownContent?: Snippet;
dropdownOpen?: boolean;
}
let {
@@ -19,6 +25,8 @@
flippedLogo = false,
isSelected = $bindable(false),
preloadData = true,
dropDownContent: hasDropdown,
dropdownOpen = $bindable(false),
}: Props = $props();
let routePath = $derived(resolveRoute(routeId, {}));
@@ -28,21 +36,44 @@
});
</script>
<a
href={routePath}
data-sveltekit-preload-data={preloadData ? 'hover' : 'off'}
draggable="false"
aria-current={isSelected ? 'page' : undefined}
class="flex w-full place-items-center 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
<span class="relative">
{#if hasDropdown}
<span class="hidden md:block absolute left-1 z-50 h-full">
<button
type="button"
aria-label={$t('recent-albums')}
class="relative flex cursor-default pt-4 pb-4 select-none justify-center hover:cursor-pointer hover:bg-immich-gray hover:fill-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary rounded h-fill"
onclick={() => (dropdownOpen = !dropdownOpen)}
>
<Icon
path={dropdownOpen ? mdiChevronDown : mdiChevronLeft}
size="1em"
class="shrink-0 delay-100 duration-100 "
flipped={flippedLogo}
ariaHidden
/>
</button>
</span>
{/if}
<a
href={routePath}
data-sveltekit-preload-data={preloadData ? 'hover' : 'off'}
draggable="false"
aria-current={isSelected ? 'page' : undefined}
class="flex w-full place-items-center 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/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
: ''}
? 'bg-immich-primary/10 text-immich-primary hover:bg-immich-primary/10 dark:bg-immich-dark-primary/10 dark:text-immich-dark-primary'
: ''}
pl-5 group-hover:sm:px-5 md:px-5
"
>
<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
<Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} ariaHidden />
<span class="text-sm font-medium">{title}</span>
</div>
<div></div>
</a>
>
<div class="flex w-full place-items-center gap-4 overflow-hidden truncate">
<Icon path={icon} size="1.5em" class="shrink-0" flipped={flippedLogo} ariaHidden />
<span class="text-sm font-medium">{title}</span>
</div>
<div></div>
</a>
</span>
{#if hasDropdown && dropdownOpen}
{@render hasDropdown?.()}
{/if}