<script>
  import NavItem from "./NavItem.svelte";
  export let segment;

  const titlesMap = {
    undefined: "home",
    "free-open-source": "free & open source",
    "about-contact": "about & contact",
    faq: "faq",
    "global-open-infrastructure": "global open infrastructure",
    "privacy-by-design": "privacy by design",
  };
</script>

<nav>
  <NavItem {segment} href="." matchingSegment={undefined} humanName="home" />

  <NavItem
    {segment}
    href="./about-contact"
    matchingSegment="about-contact"
    humanName="about & contact"
  />
</nav>

<style>
  nav {
    font-weight: 300;
    background-color: #00111d;
    color: white;
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
