<script lang="ts">
	import { page } from '$app/stores';
	import { routes } from "$lib/sitemap.ts"
	import ThemeSwitch from "$lib/components/ThemeSwitch.svelte"
	import { Rss, Menu } from "lucide-svelte";

	function isCurrentLink(pathname, route) {
		return route != "/" && pathname.startsWith(route)
			 || route == "/post" && pathname.startsWith("/page");
	}

	import { onMount } from 'svelte';

	let showDropdown = false;

	function onDropdownToggle(event) {
		showDropdown = !showDropdown;
	}
	function onKeyDown(event) {
		if (event.key == "Escape") {
			showDropdown = !showDropdown;
		}
	}
</script>

<nav
	id="navbar"
	class="h-5 space-x-4"
	class:dropdown-opened={showDropdown}>
	<div
		class="link-container"
		on:click={() => { showDropdown = false; }}
	>
		{#each routes as item}
			<a
				class="nav-link"
				class:disabled-link={item.disabled}
				class:current-link={isCurrentLink($page.url.pathname, item.route)}
				on:click={() => { showDropdown = false; }}
				href={item.route}>
				{item.name}
			</a>
		{/each}
		<a class="nav-link icon" href="/rss.xml"><Rss /></a>
		<div><ThemeSwitch /></div>
	</div>
	<button
		id="dropdown-toggle"
		aria-hidden="true"
		on:click={onDropdownToggle}>
		<Menu />
	</button>
</nav>

<svelte:window on:keydown={onKeyDown} />

<style>
	.link-container {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		position: sticky;
		top: 0;
	}
	#dropdown-toggle {
		display: none;
	}

	/* mobile mode */
	@media (max-width: 768px) {
		.link-container {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 100vh;
			justify-content: center;

			margin: 0;
			padding-left: 5vw;
			padding-right: 5vw;

			background: hsl(var(--background) / .8);

			/* Initial hidden state */
			opacity: 0;
			transform: translateY(-100%);
			transition: transform 0.2s, opacity 0.2s;
		}
		#navbar {
			display: inline-block;
			white-space: pre-wrap;
		}
		#navbar .nav-link {
			display: inline-block;
		}
		#dropdown-toggle {
			display: initial;
			z-index: 5;
		}
		.dropdown-opened > .link-container {
			opacity: 1;
			z-index: 1;
			transform: translateY(0);
		}
	}
</style>
