---
import { Icon } from "astro-icon/components";

const { pathname } = Astro.url;
---

<style lang="scss">
	@import "../scss/_variables.scss";

	[data-icon] {
		vertical-align: middle;
	}

	header {
		background-color: $colorBg;
		left: 0;
		line-height: 3.5em;
		opacity: 0.975;
		position: absolute;
		right: 0;
		top: 0;
	}

	nav {
		margin: auto;
		max-width: 52em;
		padding: 0 4em;
	}

	a {
		color: $colorText;

		&:visited {
			color: $colorText;
		}
	}

	@media (width <=684px) {
		header {
			position: fixed;
			text-align: center;
		}
	}
</style>

<header>
	<nav>
		<a href="/">
			{
				pathname !== "/" ? (
					<>
						<Icon name="hugeicons:arrow-left-01" />
						<span>Home</span>
					</>
				) : (
					<>
						<Icon name="hugeicons:source-code" />
						<span>{import.meta.env.DEFAULT_TITLE}</span>
					</>
				)
			}
		</a>
	</nav>
</header>