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

	import SidenavItem from './sidenav-item.svelte';
</script>

<aside
	class="hidden min-w-60 overflow-hidden border-r border-border transition-all duration-300 ease-in-out sm:flex sm:flex-col"
>
	<div class="flex flex-col p-4">
		<img
			src="/assets/brand/peerat.webp"
			alt="Logo"
			width="50"
			height="50"
			loading="eager"
			draggable="false"
		/>
		<ul class="flex flex-col gap-2 pt-4">
			{#each navigation as navItem}
				<li>
					<SidenavItem {navItem} />
				</li>
			{/each}
		</ul>
	</div>
</aside>
