<script lang="ts">
	import { drawerStore } from '@skeletonlabs/skeleton';

	function drawerClose(): void {
		drawerStore.close();
	}

	export let data: any;
</script>

<nav class="list-nav p-4">
	<ul class="space-y-2">
		<li>
			<a href="/" on:click={drawerClose} class="block px-4 py-2 rounded font-semibold text-lg"
				>Home</a
			>
		</li>
		<li>
			<a href="/About" on:click={drawerClose} class="block px-4 py-2 rounded font-semibold text-lg"
				>About</a
			>
		</li>
		{#if data.user}
			<li>
				<a
					href="/profile/{data.user.username}"
					on:click={drawerClose}
					class="block px-4 py-2 rounded font-semibold text-lg">Profile</a
				>
			</li>
			<li>
				<a
					href="/settings"
					on:click={drawerClose}
					class="block px-4 py-2 rounded font-semibold text-lg">Settings</a
				>
			</li>
		{/if}
	</ul>
</nav>
