48 lines
No EOL
1.1 KiB
Svelte
48 lines
No EOL
1.1 KiB
Svelte
<script>
|
|
import { page } from '$app/state';
|
|
</script>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li class:selected={page.url.pathname === "/"}>
|
|
<a href="/" >Start</a>
|
|
</li>
|
|
<li class:selected={page.url.pathname.startsWith("/events")}>
|
|
<a href="/events">Events</a>
|
|
</li>
|
|
<li class:selected={page.url.pathname === "/rules"}>
|
|
<a href="/rules">Regeln</a>
|
|
</li>
|
|
<!--<li class:selected={page.url.pathname === "/debug"}>
|
|
<a href="/debug">Debug</a>
|
|
</li>-->
|
|
</ul>
|
|
</nav>
|
|
|
|
<style>
|
|
ul {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
transition: border-bottom-color linear 0.2s;
|
|
padding: 0.6rem 0.45rem;
|
|
border-bottom: 3px var(--tg-theme-button-color) solid;
|
|
filter: grayscale(0.8);
|
|
|
|
&.selected {
|
|
filter: none;
|
|
border-bottom: 3px var(--tg-theme-button-color) solid;
|
|
}
|
|
}
|
|
|
|
a {
|
|
font-size: 1.35rem;
|
|
text-decoration: none;
|
|
}
|
|
</style> |