<script lang="ts">
	import { pages } from '$lib/pages';

	const {
		selectedIndex = $bindable(0)
	}: {
		selectedIndex: number;
	} = $props();

	const items = pages;
</script>

<section id="sidebar">
	{#each items as item, index}
		<!-- svelte-ignore a11y_consider_explicit_label -->
		<a href={item.href} class:selected={index == selectedIndex} class="flex items-center gap-2">
			<img
				src={item.icon}
				alt=" "
				class="w-6"
				style="filter: {index == selectedIndex
					? 'invert(68%) sepia(97%) saturate(749%) hue-rotate(97deg) brightness(154%) contrast(101%)'
					: 'none'};"
			/>
			<span>{item.name}</span>
		</a>
	{/each}
</section>

<style>
	#sidebar {
		position: fixed;
		background-color: var(--bg-primary);
		height: 100vh;
		width: 200px;
		padding-top: 72px;
		color: white;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	#sidebar > a {
		padding: 8px;
		padding-right: 0;
		transition-duration: 0.2s;
		border-color: var(--text-lime);
	}

	#sidebar > a:is(:hover, :focus) {
		background-color: var(--bg-secondary);
	}

	.selected {
		color: var(--text-lime);
		background-color: var(--bg-secondary);
		font-weight: bold;
		border-right: 6px var(--text-lime) solid;
		width: 100%;
	}
</style>
