<script>
  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>
<header>
  <nav class="navbar is-fixed-top" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item has-text-weight-normal is-size-4 is-smallcaps" href="{{ .Site.BaseURL }}">
        {{ .Site.Title|safeHTML }}
      </a>
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div id="navMenu" class="navbar-menu">
      <div class="navbar-end">
        {{ range .Site.Menus.main }}
          {{ if .HasChildren }}
            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link is-smallcaps">
                {{ .Name }}
              </a>
              <div class="navbar-dropdown is-right">
                {{ $len := len .Children }}
                {{ range $i, $child := .Children }}
                  <a href="{{ $child.URL }}" title="{{ $child.Name }}" class="navbar-item is-smallcaps">
                    {{ $child.Name }}
                  </a>
                  {{ if not (eq (add $len -1) $i) }}
                    <hr class="navbar-divider">
                  {{ end }}
                {{ end }}
              </div>
            </div>
          {{ else }}
            <a href="{{ .URL }}" title="{{ .Name }}" class="mr-3 navbar-item is-smallcaps">
              {{ .Name }}
            </a>
          {{ end }}
        {{ end }}
      </div>
    </div>
  </nav>
</header>
