www-2021/src/components/Nav.svelte

<script>
  export let segment;
</script>

<nav>
  <ul>
    <li>
      <a
        rel="prefetch"
        aria-current={segment === undefined ? "page" : undefined}
        href=".">home</a
      >
    </li>
    <li>
      <a
        rel="prefetch"
        aria-current={segment === "global-open-infrastructure" ? "page" : undefined}
        href="./global-open-infrastructure">global open infrastructure</a
      >
    </li>
    <li>
      <a
        rel="prefetch"
        aria-current={segment === "privacy-by-design" ? "page" : undefined}
        href="./privacy-by-design">privacy by design</a
      >
    </li>
    <li>
      <a
        rel="prefetch"
        aria-current={segment === "free-open-source" ? "page" : undefined}
        href="./free-open-source">free and open-source</a
      >
    </li>
    <li>
      <a
        rel="prefetch"
        aria-current={segment === "faq" ? "page" : undefined}
        href="./faq">faq</a
      >
    </li>
    <li>
      <a
        rel="prefetch"
        aria-current={segment === "about-contact" ? "page" : undefined}
        href="./about-contact">about & contact</a
      >
    </li>
  </ul>
</nav>

<style>
  nav {
    font-weight: 300;
    background-color: #00111d;
    color: white;
  }

  ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }

  /* clearfix */
  ul::after {
    content: "";
    display: block;
    clear: both;
  }

  li {
    display: block;
  }

  [aria-current] {
    position: relative;
    display: inline-block;
    font-weight: bold;
  }

  [aria-current]::after {
    position: absolute;
    content: "";
    width: calc(100% - 1em);
    height: 3px;
    background-color: white;
    display: block;
    bottom: -1px;
  }

  a {
    text-decoration: none;
    padding: 1em 0.5em;
    display: block;
    line-height: 1em;
  }
</style>