<script lang="ts">
	import { page } from '$app/stores';

	const links = [
		{
			name: 'Home',
			link: '/'
		},
		{
			name: 'Projects',
			link: '/projects'
		},
		{
			name: 'Posts',
			link: '/posts'
		}
	];

	function isActive(link: string): string {
		if (link === $page.url.pathname) {
			return 'active';
		}
		return '';
	}
</script>

<nav>
	{#each links as link}
		<a href={link.link} class={isActive(link.link)}>{link.name}</a>
	{/each}
</nav>

<style>
	nav {
		position: static;
		top: 0;
		left: 0;
		width: 100%;
		height: 42px;
		margin: 0;
		padding: 0;
		background-color: var(--second-bg-color);
	}

	nav a {
		float: left;
		display: block;
		color: var(--second-heading-color);
		text-align: center;
		padding: 10px 15px;
		margin-right: 1px;
		text-decoration: none;
		font-size: 18px;
		font-family: caprasimo;
		font-weight: normal;
	}

	nav a:hover {
		background-color: var(--main-bg-color);
		color: var(--main-heading-color);
	}

	nav a:active {
		color: var(--main-bg-color);
	}
</style>
