chellaris-sign-up-site/src/routes/Header.svelte

<script>
	import { page } from '$app/stores';
	import discord from '$lib/images/discord.svg';
	import Settings from './Settings.svelte';

	let showSettings = false;
</script>

<Settings bind:showSettings={showSettings}/>

<header>
	<div class="corner">
	</div>

	<nav>
		<svg viewBox="0 0 2 3" aria-hidden="true">
			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
		</svg>
		<ul>
			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
				<a href="/">Home</a>
			</li>
			<li aria-current={$page.url.pathname.startsWith('/graphs') ? 'page' : undefined}>
				<a href="/graphs">Graphs</a>
			</li>
			<li aria-current={$page.url.pathname === '/legacy-graphs' ? 'page' : undefined}>
				<a href="/legacy-graphs">Game 15 Graphs</a>
			</li>
			<!--<li aria-current={$page.url.pathname.startsWith('/sign-up') ? 'page' : undefined}>
				<a href="/sign-up">Empire Sign-Up</a>
			</li>-->
			<li aria-current={$page.url.pathname.startsWith('/admin') ? 'page' : undefined}>
				<a href="/admin">Admin Menu</a>
			</li>
			<li aria-current={$page.url.pathname.startsWith('/about') ? 'page' : undefined}>
				<a href="/about">About</a>
			</li>
			<li>
				<button on:click={() => showSettings = !showSettings}>Settings</button>
			</li>
		</ul>
		<svg viewBox="0 0 2 3" aria-hidden="true">
			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
		</svg>
	</nav>

	<div class="corner">
		<a href="https://discord.gg/invite/BYNeHaPNh9" target="_blank" rel="noopener noreferrer">
			<img src={discord} alt="Discord" />
		</a>
	</div>
</header>

<style>
	header {
		display: flex;
		justify-content: space-between;
	}

	.corner {
		width: var(--height-m);
		height: var(--height-m);
	}

	.corner a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.corner img {
		width: 2em;
		height: 2em;
		object-fit: contain;
	}

	nav {
		display: flex;
		justify-content: center;
		--background: rgba(0, 0, 0, 0.7);
	}

	svg {
		width: 2em;
		height: var(--height-m);
		display: block;
	}

	path {
		fill: var(--background);
	}

	ul {
		position: relative;
		padding: 0;
		margin: 0;
		height: var(--height-m);
		display: flex;
		justify-content: center;
		align-items: center;
		list-style: none;
		background: var(--background);
		background-size: contain;
	}

	li {
		position: relative;
		height: 100%;
	}

	li[aria-current='page']::before {
		--size: 6px;
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: calc(50% - var(--size));
		border: var(--size) solid transparent;
		border-top: var(--size) solid var(--color-active-1);
	}

	nav a {
		display: flex;
		height: 100%;
		align-items: center;
		padding: 0 0.5rem;
		color: var(--color-text);
		font-weight: 700;
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		text-decoration: none;
		transition: color 0.2s linear;
	}

	nav a:hover {
		color: var(--color-active-1);
	}

	nav button {
		display: flex;
		height: 100%;
		align-items: center;
		padding: 0 0.5rem;
		color: var(--color-text);
		font-weight: 700;
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		text-decoration: none;
		transition: color 0.2s linear;
		cursor: pointer;
		background: var(--background);
		border: 0;
	}

	nav button:hover {
		color: var(--color-active-1);
	}
</style>