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.
38 lines
1.0 KiB
38 lines
1.0 KiB
<script lang="ts">
|
|
import { link } from "svelte-routing";
|
|
import selectionStore from "../stores/selection";
|
|
|
|
$: 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 class:selected={selected.home} use:link href="/">Stufflog</a>
|
|
<a class:selected={selected.goals} use:link href="/goals">Goals</a>
|
|
<a class:selected={selected.questlog} use:link href="/questlog">Projects</a>
|
|
<a class:selected={selected.items} use:link href="/items">Items</a>
|
|
<a 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;
|
|
}
|
|
</style>
|