---
import Avatar from './Avatar.astro';
const { pathname } = Astro.url;

interface Props {}

interface NavLink {
	label: string;

	path: string;
}

const navLinks: NavLink[] = [
	{ label: 'Blog', path: 'blog' },
	{ label: 'Now', path: 'now' },
	{ label: 'Projects', path: 'projects' },
];

const pathComponents = pathname.split('/').slice(1);
---

<header>
	<div>
		{
			pathComponents[0] !== '' ? (
				<a href="/" transition:name="my-avatar">
					<Avatar size={60} />
				</a>
			) : null
		}
	</div>
	<nav>
		{
			navLinks.map((link) => (
				<li>
					<a href={`/${link.path}`}>
						<span>{link.label}</span>
					</a>
					{pathComponents[0] === link.path ? (
						<div class="underline" transition:name="menu-selection-indicator" />
					) : null}
				</li>
			))
		}
	</nav>
</header>

<style>
	.underline {
		height: 2px;
		width: 100%;
		background-color: var(--orange);
	}
</style>