<!-- Bulma navigation bar example -->
<!-- apply primary theme with padding of 2 -->
<nav class="navbar is-primary p-2" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      Logo
    </a>
    <button class="navbar-burger" data-target="navToggle">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </button>
  </div>

  <div id="navToggle" class="navbar-menu">
  <!-- nav link container '-end' puts to the right side   -->
    <div class="navbar-end">     
      <a class="navbar-item is-active" href="#">
        Home
      </a>
      <a class="navbar-item" href="#">
        About Us
      </a>
      <!-- 'has-dropdown' adds dropdown to the nav item 'is-hoverable' makes it active on hover -->
      <ul class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="#">
          More
        </a>
        <div class="navbar-dropdown">
          <a class="navbar-item" href="#">
            About
          </a>
          <a class="navbar-item" href="#">
            Jobs
          </a>
          <a class="navbar-item" href="#">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="#">
            Report an issue
          </a>
        </div>
      </ul>
    </div>
  </div>
</nav>

// Get "navbar-burger" element
const navbarBurger =document.querySelector('.navbar-burger')
// Add a click event 
navbarBurger.addEventListener('click', () => {
  // Get the target from the "data-target" attribute
  const target = navbarBurger.dataset.target;
  // Get the element with the id same as the target
  const menu = document.getElementById(target);

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