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

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

  <NavItem {segment} href="./faq" matchingSegment="faq" humanName="faq" />

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

  <div class="dropdown">
    <div class="dropdown-name">more</div>
    <div class="dropdown-content">
      <NavItem
        {segment}
        href="./global-open-infrastructure"
        matchingSegment="global-open-infrastructure"
        humanName="global open infrastructure"
      />

      <NavItem
        {segment}
        href="./privacy-by-design"
        matchingSegment="privacy-by-design"
        humanName="privacy by design"
      />

      <NavItem
        {segment}
        href="./free-open-source"
        matchingSegment="free-open-source"
        humanName="free and open-source"
      />
    </div>
  </div>
</nav>

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

  .dropdown {
    height: 100%;
    width: 49px;
  }

  .dropdown-name {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dropdown-content {
    display: none;
    position: relative;
    right: 181px;
    box-sizing: border-box;
    background-color: #33414a;
    color: white;
    width: 230px;
    box-shadow: 0 2px 6px -0.25px #00000035;
    z-index: 1;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .dropdown:hover .dropdown-content {
    display: block;
    box-sizing: border-box;
  }
</style>
