---
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>

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

  input[type="checkbox"]:checked ~ .dropdown-content {
    display: flex;
    height: auto;
  }

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

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

  .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>