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

<div class="dropdown">
  <input type="checkbox" id="dropdown" />
  <ul class="dropdown-content">
    <slot />
  </ul>
  <label for="dropdown" class="dropdown-btn" aria-label="Menu Toggle">
    <div class="hamburger-menu" role="navigation"></div>
  </label>
</div>

<script>
  const dropdownBtn = document.querySelector(".dropdown-btn")!;
  const dropdownContent = document.querySelector(".dropdown-content")!;

  dropdownBtn.addEventListener("click", () => {
    dropdownContent.classList.toggle("menu-open");
  });
</script>

<style define:vars={{ hamburger_src_url }}>
  input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    touch-action: manipulation;
  }

  .dropdown-content.menu-open {
    display: flex;
    height: auto;
    transform: translateY(0);
    transition: transform var(--a-time-default) var(--a-animation-1);
  }

  .dropdown-content {
    display: none;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--c-primary-background);
    width: 100%;
    list-style-type: none;
    line-height: 3em;
    margin: 0.5rem 0px 0px;
    padding: 0;
    transform: translateY(-1em);
    transition: transform var(--a-time-default) var(--a-animation-1);
  }

  .dropdown-btn {
    height: 64px;
    display:flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  .dropdown {
    display: flex;
    justify-content: flex-end;
    background-color: var(--c-primary-background);
    border: 0px;
    width: 100%;
  }

  .hamburger-menu {
    mask: var(--hamburger_src_url) no-repeat center;
    mask-size: cover;
    background-color: var(--c-primary-text);
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 10px;
  }

  @media (min-width: 1140px) {
    .dropdown {
      display: none;
    }
  }
</style>