Drawer

let open = false;

const icons = {
	Bats: '&#129415',
	Spiders: '&#128375',
	Scorpions: '&#129410'
};

const creepyAnimals = ['Bats', 'Spiders', 'Scorpions'];
let creepiestAnimal = creepyAnimals[0];

function handleClickCreepyAnimal(ev: MouseEvent) {
	const target = ev.target as HTMLElement;
	creepiestAnimal = target.getAttribute('data-animal') as string;
	open = false;
}

<Drawer id="drawer" on:click_outside={() => (open = false)} bind:open>
	<div class="p-4 flex flex-col items-end gap-4">
		<div class="flex items-center">
			<button
				on:click={() => (open = false)}
				aria-label="Close drawer"
				class="svogg-btn"
			>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="24"
					height="24"
					viewBox="0 0 24 24"
				>
					<path
						fill="none"
						stroke="currentColor"
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="1.5"
						d="M6 18L18 6M6 6l12 12"
					/>
				</svg>
			</button>
		</div>
		<ul class="flex flex-col w-full min-w-[200px] gap-2">
			{#each creepyAnimals as animal}
				{@const active = animal == creepiestAnimal}
				<li class="drawer-item" class:active>
					<button
						data-animal={animal}
						on:click={handleClickCreepyAnimal}
					>
						<span class="flex items-center gap-2 pointer-events-none">
							{animal}
							{@html icons[animal]}
						</span>
					</button>
				</li>
			{/each}
		</ul>
	</div>
</Drawer>
<button
	on:click={() => (open = true)}
	class="drawer-toggle-btn"
	aria-expanded={open}
	aria-controls="drawer"
>
	Open drawer
</button>
<span class="py-2">
	The creepiest animal is {@html icons[creepiestAnimal]}
</span>