You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.6 KiB
60 lines
1.6 KiB
<script lang="ts">
|
|
import { link } from "svelte-routing";
|
|
import selectionStore from "../stores/selection";
|
|
|
|
export let location: string = window.location.pathname.split("?")[0];
|
|
|
|
function updateLocation() {
|
|
setTimeout(() => {
|
|
location = window.location.pathname.split("?")[0];
|
|
}, 0);
|
|
}
|
|
|
|
$: selected = {
|
|
home: $selectionStore.path === "/",
|
|
goals: $selectionStore.path.startsWith("/goals"),
|
|
questlog: $selectionStore.path.startsWith("/questlog"),
|
|
projects: $selectionStore.path.startsWith("/projects"),
|
|
items: $selectionStore.path.startsWith("/items"),
|
|
logs: $selectionStore.path.startsWith("/logs"),
|
|
}
|
|
</script>
|
|
|
|
<nav>
|
|
<a on:click={updateLocation} class:selected={selected.home} use:link href="/">Stufflog</a>
|
|
<a on:click={updateLocation} class:selected={selected.goals} use:link href="/goals">Goals</a>
|
|
<a class="desktop" on:click={updateLocation} class:selected={selected.questlog} use:link href="/questlog">Projects</a>
|
|
<a class="mobile" on:click={updateLocation} class:selected={selected.projects} use:link href="/projects">Projects</a>
|
|
<a on:click={updateLocation} class:selected={selected.items} use:link href="/items">Items</a>
|
|
<a on:click={updateLocation} class:selected={selected.logs} use:link href="/logs">Logs</a>
|
|
</nav>
|
|
|
|
<style>
|
|
nav {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
padding: 0.25em;
|
|
color: #555;
|
|
font-size: 1em;
|
|
}
|
|
a.selected {
|
|
color: #AAA;
|
|
}
|
|
|
|
a.mobile {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
a.mobile {
|
|
display: inline-block;
|
|
}
|
|
a.desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|