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

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

<div id="navbar" class="h-5 space-x-4">
	<p id="bio-name">{name}</p>
	{#each routes as item}
		<a
			class="nav-link"
			class:current-link={isCurrentLink($page.url.pathname, item.route)}
			class:disabled-link={item.disabled}
			href={item.route}>{item.name}</a>
	{/each}
	<div><ThemeSwitch /></div>
	<a class="icon" href="/rss.xml"><Rss /></a>
</div>

<style>
	#bio-name {
		font-family: serif;
		font-size: 3rem;
		font-weight: normal;
		color: theme('colors.java.800');
	}
	#navbar {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: between;
	}
	@media (max-width: 700px) {
		#navbar {
			display: inline-block;
			white-space: pre-wrap;
		}
		#navbar .nav-link {
			display: inline-block;
		}
	}
</style>
