163 lines
3.3 KiB
Svelte
163 lines
3.3 KiB
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>
|