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

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