#import "./custom_html.typ" as chtml

/// Buttons to toggle the navigation menu.
#let nav-menu-toggle(
) = {
  ```raw-css
  body:has(#nav-menu-toggle:checked) #icon-nav-menu { display: none; }
  body:has(#nav-menu-toggle:checked) #icon-nav-menu-close { display: block; }
  body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu { display: block; }
  body:has(#nav-menu-toggle:not(:checked)) #icon-nav-menu-close { display: none; }
  #nav-menu-toggle-label {
    input {
      opacity: 0;
      position: absolute;
      pointer-event: none;
    }
  }
  ```
  html.label(id: "nav-menu-toggle-label", {
     html.input(type: "checkbox", name: "nav-menu-toggle", id: "nav-menu-toggle")
    chtml.icon-container(id: "icon-nav-menu", sym.eq.triple)
    chtml.icon-container(id: "icon-nav-menu-close")[X]
  })
  /*
  <button class="btn btn-square" id="menu-toggle" aria-expanded="true" type="button" title="Menu">
    <svg class="icon-menu" width="24" height="24" fill="currentcolor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path clip-rule="evenodd" fill-rule="evenodd" d="M3 6.75A.75.75.0 013.75 6h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 6.75zM3 12a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 12zm0 5.25a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 17.25z"></path>
    </svg>
    <svg class="icon-close hidden" width="24" height="24" fill="currentcolor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path clip-rule="evenodd" fill-rule="evenodd" d="M5.47 5.47a.75.75.0 011.06.0L12 10.94l5.47-5.47a.75.75.0 111.06 1.06L13.06 12l5.47 5.47a.75.75.0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75.0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75.0 010-1.06z"></path>
    </svg>
  </button>
  */
}

#let nav-menu(body) = {
  ```raw-css
  body:has(#nav-menu-toggle:not(:checked)) nav-menu {
    display: none;
  }
  nav-menu {
  }
  ```
  chtml.nav-menu(body)
}