<script lang="ts">
	import { goto } from '$app/navigation';
	import { userStore } from '$lib/UserStore.svelte';
</script>

<div class="p-7 pb-1">
	<div class="card p-2 rounded-xl flex">
		<button class="text-secudanry hover:text-violet-500 px-2" onclick={() => goto('/')}>
			Home
		</button>
		<button class="text-secudanry hover:text-violet-500 px-2" onclick={() => goto('/flair')}>
			Flair
		</button>
		<button class="text-secudanry hover:text-violet-500 px-2" onclick={() => goto('/graphs')}>
			Graphs
		</button>
		<button class="text-secudanry hover:text-violet-500 px-2" onclick={() => goto('/flow')}>
			Flow
		</button>
		<div class="flex-grow"></div>
		<div class="text-secudanry px-2">
			{userStore.user.username}
		</div>
		<button
			class="text-secudanry hover:text-primary px-2"
			onclick={() => {
				userStore.user = undefined;
				goto('/login');
			}}
		>
			Logout
		</button>
	</div>
</div>
