feat(web): custom drop down button (#2887)

* feat(web): custom drop down button

* fix test

* fix test

web/src/lib/components/elements/dropdown.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
+	import Check from 'svelte-material-icons/Check.svelte';
+	import LinkButton from './buttons/link-button.svelte';
+	import { clickOutside } from '$lib/utils/click-outside';
+	import { fly } from 'svelte/transition';
+
+	export let options: string[] = [];
+	export let value = options[0];
+
+	let showMenu = false;
+
+	const handleClickOutside = () => {
+		showMenu = false;
+	};
+
+	const handleSelectOption = (index: number) => {
+		value = options[index];
+		showMenu = false;
+	};
+</script>
+
+<div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}>
+	<!-- BUTTON TITLE -->
+	<LinkButton on:click={() => (showMenu = true)}>
+		<div class="flex place-items-center gap-2 text-sm">
+			<SwapVertical size="18" />
+			{value}
+		</div>
+	</LinkButton>
+
+	<!-- DROP DOWN MENU -->
+	{#if showMenu}
+		<div
+			transition:fly={{ y: -30, x: 30, duration: 200 }}
+			class="absolute top-5 right-0 min-w-[250px] bg-gray-100 dark:bg-gray-700 rounded-2xl py-4 shadow-lg dark:text-white text-black z-50 text-md flex flex-col"
+		>
+			{#each options as option, index (option)}
+				<button
+					class="hover:bg-gray-300 dark:hover:bg-gray-800 p-4 transition-all grid grid-cols-[20px,1fr] place-items-center gap-2"
+					on:click={() => handleSelectOption(index)}
+				>
+					{#if value == option}
+						<div class="text-immich-primary dark:text-immich-dark-primary font-medium">
+							<Check size="18" />
+						</div>
+						<p
+							class="justify-self-start text-immich-primary dark:text-immich-dark-primary font-medium"
+						>
+							{option}
+						</p>
+					{:else}
+						<div />
+						<p class="justify-self-start">
+							{option}
+						</p>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>

web/src/routes/(user)/albums/+page.svelte

@@ -12,18 +12,13 @@
 	import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
 	import { onMount } from 'svelte';
 	import { flip } from 'svelte/animate';
+	import Dropdown from '$lib/components/elements/dropdown.svelte';
 
 	export let data: PageData;
 
 	const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
-
 	let selectedSortBy = sortByOptions[0];
 
-	const handleChangeSortBy = (e: Event) => {
-		const target = e.target as HTMLSelectElement;
-		selectedSortBy = target.value;
-	};
-
 	const {
 		albums: unsortedAlbums,
 		isShowContextMenu,
@@ -84,25 +79,14 @@
 
 <UserPageLayout user={data.user} title={data.meta.title}>
 	<div class="flex place-items-center gap-2" slot="buttons">
-		<label class="text-xs" for="sortBy">Sort by:</label>
-		<select
-			class="text-sm bg-slate-200 p-2 rounded-lg dark:bg-gray-600 hover:cursor-pointer"
-			name="sortBy"
-			id="sortBy-select"
-			bind:value={selectedSortBy}
-			on:change={handleChangeSortBy}
-		>
-			{#each sortByOptions as option}
-				<option value={option}>{option}</option>
-			{/each}
-		</select>
-
 		<LinkButton on:click={handleCreateAlbum}>
 			<div class="flex place-items-center gap-2 text-sm">
 				<PlusBoxOutline size="18" />
 				Create album
 			</div>
 		</LinkButton>
+
+		<Dropdown options={sortByOptions} bind:value={selectedSortBy} />
 	</div>
 
 	<!-- Album Card -->