---
import { ClientRouter } from "astro:transitions";
import HeaderLink from "./HeaderLink.astro";
import Socials from "./Socials.astro";
---

<header>
	<nav>
	  <a class="logo" href="/">
	    <img src="/logo.svg" alt="ಠ_ಠ" />
	  </a>
		<div class="internal-links">
			<HeaderLink href="/">Home</HeaderLink>
			<HeaderLink href="/projects">Projects</HeaderLink>
			<HeaderLink href="/blog">Blog</HeaderLink>
    </div>
    <Socials />
	</nav>
</header>

<ClientRouter />

<style>
	header {
		margin: 0;
		padding: 0 1em;
		width: 100%;
		background-color: var(--background-soft);
	}

	header .logo {
		display: flex;
		align-items: center;
	}

	header .logo a {
		margin: 0;
	}

	header .logo img {
		height: 24pt;
	}

	nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	nav a {
		padding: .4em 0.5em;
		color: var(--text);
		border-bottom: 4px solid transparent;
		text-decoration: none;
	}

	nav a.active {
		text-decoration: none;
		border-bottom-color: var(--primary);
	}


	@media (max-width: 720px) {
	  header .logo img {
	    height: 18pt;
	  }

	  nav {
	    font-size: 16px;
	  }
	}
</style>