stufflog2/svelte-ui/src/components/Menu.svelte

<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>