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.
44 lines
1.2 KiB
44 lines
1.2 KiB
<script lang="ts">
|
|
import { link } from "svelte-routing";
|
|
|
|
export let location: string = window.location.pathname.split("?")[0];
|
|
|
|
function updateLocation() {
|
|
setTimeout(() => {
|
|
location = window.location.pathname.split("?")[0];
|
|
}, 0);
|
|
}
|
|
|
|
$: selected = {
|
|
home: location == "/",
|
|
goals: location.startsWith("/goals"),
|
|
projects: location.startsWith("/projects"),
|
|
items: location.startsWith("/items"),
|
|
logs: location.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 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;
|
|
}
|
|
</style>
|