www-2021/src/components/NavItem.svelte

<script>
  export let segment;
  export let humanName;
  export let href;
  export let matchingSegment;
</script>

<div
  class="navItem"
  aria-current={segment === matchingSegment ? "page" : undefined}
>
  <a rel="prefetch" {href}>{humanName}</a>
</div>

<style>
  .navItem {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  a {
    text-decoration: none;
  }

  .navItem[aria-current] {
    font-weight: bold;
  }
</style>