Bulma Nav Toggle in Mint

head.html

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.css">
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    // Get all "navbar-burger" elements
    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

    // Check if there are any navbar burgers
    if ($navbarBurgers.length > 0) {

      // Add a click event on each of them
      $navbarBurgers.forEach( el => {
        el.addEventListener('click', () => {

          // Get the target from the "data-target" attribute
          const target = el.dataset.target;
          const $target = document.getElementById(target);

          // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
          el.classList.toggle('is-active');
          $target.classList.toggle('is-active');

        });
      });
    }
  });
</script>

Main.mint

component Main {
  fun render : Html {
    <div>
      <a
        role="button"
        class="navbar-burger"
        data-target="navMenu"
        aria-label="menu"
        aria-expanded="false">

        <span aria-hidden="true"/>
        <span aria-hidden="true"/>
        <span aria-hidden="true"/>

      </a>

      <div
        class="navbar-menu"
        id="navMenu">

        "NAVMENU"

      </div>
    </div>
  }
}

mint.json

{
  "name": "test",
  "application": {
    "head": "head.html"
  },
  "source-directories": [
    "source"
  ],
  "test-directories": [
    "tests"
  ]
}