pinafore/routes/_components/NavItem.html

<a class='main-nav-link {{page === name ? "selected" : ""}}'
   aria-label='{{page === name ? `${label} (current page)` : label}}'
   aria-current="{{page === name}}"
   href='{{href}}'>
  <svg>
    <use xlink:href="{{svg}}" />
  </svg>
  <span>{{label}}</span>
</a>
<style>
  .main-nav-link {
    border-bottom: 1px solid var(--nav-a-border);
    text-decoration: none;
    padding: 25px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main-nav-link.selected {
    border-bottom: 1px solid var(--nav-a-selected-border);
    background: var(--nav-a-selected-bg);
  }

  .main-nav-link.selected:hover {
    border-bottom: 1px solid var(--nav-a-selected-border-hover);
    background: var(--nav-a-selected-bg-hover);
  }

  .main-nav-link:hover {
    background-color: var(--nav-a-bg-hover);
    border-bottom: 1px solid var(--nav-a-border-hover);
  }

  .main-nav-link:hover span {
    color: var(--nav-text-color-hover);
  }
  .main-nav-link:hover svg {
    fill: var(--nav-svg-fill-hover);
  }

  .main-nav-link svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    fill: var(--nav-svg-fill);
  }

  .main-nav-link span {
    font-size: 16px;
    color: var(--nav-text-color);
    padding-left: 10px;
  }

  @media (max-width: 767px) {
    .main-nav-link span {
      display: none;
    }
    .main-nav-link svg {
      width: 25px;
      height: 25px;
    }
  }
</style>
<script>

</script>