---
import { Image } from 'astro:assets'
import logo from '../assets/logo.svg'
import hamburger from 'iconoir/icons/menu.svg'
const hamburger_src_url = `url("${hamburger.src}")`
---

<header>
  <a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
    <Image src={logo} alt="" loading="eager"/>
    <span class="visually-hidden">Logo</span>
  </a>
  <ul class="desktop">
    <slot name="desktop" />
  </ul>
  <button
    class="mobile"
    aria-label="Navigation Button"
    tabindex="0"
    onclick="this.focus()"
    role="button"
  >
    <ul>
      <slot name="mobile" />
    </ul>
    <div class="placeholder"></div>
    <div class="hamburger-menu" role="navigation"></div>
  </button>
</header>

<style define:vars={{ hamburger_src_url }}>
  header {
    z-index: 1000;
    position: sticky;
    top: 0px;
    background-color: var(--c-darkergray);
    display: flex;
    height: auto;
    width: 100%;
    align-items: flex-start;
    line-height: 1.5em;
    border-bottom: 2px solid var(--c-darkpurple) ;
  }
  header > a {
    margin-left: 16px;
    padding-top: 8px;
    display: block;
    height: 48px;
    width: 48px;
  }
  a > img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .desktop {
    align-items: center;
    justify-content: space-around;
    display: none;
    flex-wrap: wrap;
    flex-direction: row;
    height: 64px;
    width: 100%;
    list-style-type: none;
    row-gap: 0.5em;
    column-gap: 0.5ch;
    margin: 0px;
    line-height: 1.5em;
  }
  .mobile > ul {
    background-color: var(--c-darkergray);
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    display: flex;
    width: 100%;
    list-style-type: none;
    line-height: 3em;
  }

  .placeholder {
    display: flex;
    width: 100%;
  }

  .mobile {
    display: flex;
    background-color: var(--c-darkergray);
    border: 0px;
    width: 100%;
    height: 64px;
  }

  .mobile > ul {
    display: none;
    padding: 0px;
  }

  .mobile:focus-within > ul {
    display: flex;
  }

  .mobile:focus-within > .placeholder {
    display: none;
  }

  .mobile:focus-within {
    justify-content: top;
    height: auto;
  }
  header:focus-within > a {
    display: flex;
    justify-self: top;
  }

  .hamburger-menu {
    mask: var(--hamburger_src_url) no-repeat center;
    mask-size: cover;
    background-color: white;
    width: 2.25rem;
    height: 2.25rem;
    position: static;
    align-self: flex-start;
    margin-right: 1rem;
    margin-top: 0.825rem;
  }

  @media (min-width: 1140px) {
    .mobile {
      display: none;
    }
    .desktop {
      display: flex;
    }

    header {
      height: 64px;
      align-items: center;
    }

    header > a {
      padding-top: 0px;
    }
  }
</style>
