<script>
  import { link } from "svelte-routing";

  export let href = "/";
</script>

<a class="menu-item" href={href} on:click use:link><slot/></a>

<style>
  a.menu-item {
    display: flex;
    background-color: #222;
    margin: 0;
    padding: 0.25em 1ch;

    color: #777;

    transition: 250ms;
  }

  a.menu-item:hover {
    background-color: #111;
    color: #ccc;
    text-decoration: none;

    transition: 250ms;
  }
</style>