---
import UserIcon from './icons/UserIcon.astro'
import WebsiteIcon from './icons/Website.astro'

const { pathname } = Astro.url

const navLinks = [
	{ label: 'Blog', path: '/' },
	{ label: 'About', path: '/about/' },
]
---

<header>
	<h1>Graham's Blog</h1>
	<nav>
		<ul>
			{
				navLinks.map((link) => (
					<li>
						<a
							class={pathname === link.path ? 'active-nav' : null}
							href={link.path}
						>
							{() => {
								switch (link.label) {
									case 'Blog':
										return <WebsiteIcon class="icon" />
									case 'About':
										return <UserIcon class="icon" />
								}
							}}
							<span>{link.label}</span>
						</a>
					</li>
				))
			}
		</ul>
	</nav>
</header>

<style>
	header {
		margin: 0;
		padding: 0.5rem 1rem;
		max-width: 800px;
		display: flex;
		flex-direction: column;
		margin: auto;
		justify-content: space-between;
		align-items: center;
	}

	header h1 {
		text-align: center;
	}

	nav ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
		padding: 0;
		margin: 0;
	}

	nav ul li {
		height: 40px;
		align-items: center;
	}

	nav ul li a {
		position: relative;
		font-size: 1.2rem;
		display: flex;
		gap: 0.5rem;
		align-items: center;
	}

	nav ul li a::before {
		content: '';
		position: absolute;
		left: -10px;
		width: 6px;
		height: 6px;
		border-radius: 10px;
		background-color: var(--blue);
		opacity: 0;
	}

	nav ul li a:hover {
		text-decoration: none;
	}

	nav ul li a:hover::before {
		opacity: 0.6;
	}

	.active-nav::before {
		opacity: 1;
	}

	nav ul li::before {
		content: '';
	}
</style>
