<script>
	import Icon from '@iconify/svelte';
	import { drawerStore } from '@skeletonlabs/skeleton';

	const routes = [
		{ path: '/', name: 'Home', icon: 'iconoir:home-simple-door' },
		{ path: '/messages', name: 'Messages', icon: 'iconoir:message-text' },
		{ path: '/wallet', name: 'Wallet', icon: 'iconoir:wallet' },
		{ path: '/helloearth', name: 'Hello Earth', icon: 'iconoir:planet-sat' }
	];
	function closeDrawer() {
		drawerStore.close();
	}
</script>

<div class="flex flex-col items-start p-4">
	<h2 class="font-bold h3">Apps</h2>
	<div class="flex space-x-4">
		{#each routes as route}
			<a class="flex flex-col items-center w-28 logo-item" href={route.path} on:click={closeDrawer}>
				<Icon icon={route.icon} width="96" height="96" />
				<span class="mt-2 text-center">{route.name}</span>
			</a>
		{/each}
	</div>
</div>
