navbar.html

  <!-- Page header -->
  <!-- https://bulma.io/documentation/layout/hero/ -->
  <section class="hero is-primary">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">2019 SF Eviction Notices Visualization</h1>
      </div>
    </div>
  </section>
  <!-- End page header -->
<!-- Page navigation -->
<!-- https://bulma.io/documentation/components/navbar/ -->
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
  <div class="container">
    <div class="navbar-brand">
      <!-- TODO: Change link to repository homepage if needed -->
      <!-- TODO: Change which navbar-item is-active if needed -->
      <a class="navbar-item" href="index.html">
        <span class="icon"><i class="fas fa-home"></i></span>
        <span>Home</span>
      </a>

      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="main-menu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="main-menu" class="navbar-menu has-text-weight-medium">
      <!-- Left navbar items -->
      <div class="navbar-start">
        <a class="navbar-item" href="data.html" title="Data">
          <span class="icon"><i class="fas fa-table"></i></span>
          <span>Data</span>
        </a>

          <!-- Left navbar items -->
          <div class="navbar-start">
            <a class="navbar-item" href="feedback.html" title="Feedback">
              <span class="icon"><i class="fa fa-comments"></i></span>
              <span>Feedback</span>
            </a>

        <!-- TODO: Modify or remove dropdown --> 

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            Visualizations
          </a>
          
          <div class="navbar-dropdown">
            <p class="buttons">
              <a class="navbar-item" href="map.html">
                <span class="icon"><i class="fas fa-map-marked"></i></span>
                <span>Alpha Prototype</span>
              </a> 

            <p class="buttons">
              <a class="navbar-item" href="map1.html">
                <span class="icon"><i class="fas fa-map-marked"></i></span>
                <span>Beta Prototype</span>
              </a> 

              <p class="buttons">
                <a class="navbar-item" href="map2.html">
                  <span class="icon"><i class="fas fa-map-marked"></i></span>
                  <span>Final</span>
                </a> 


  
            <!-- <a class="button is-large is-info" href="https://usf-cs360-spring2020.github.io/homework1-adityanz/bar.html">
              <span class="icon is-medium">
                <i class="fas fa-chart-bar"></i>
              </span>
              <span>Beta Prototype</span>
            </a> -->


          <!-- <div class="navbar-dropdown"></div> -->

            <!-- <a class="navbar-item" href="https://usf-cs360-spring2020.github.io/midterm-windows-10/stackBars.html">
              <span class="icon"><i class="fas fa-chart-bar"></i></span>
              <span>Stack Bar</span>
            </a> -->
            </div>
          </div>
        </div>
      </div>

      <!-- Right navbar items -->
      <div class="navbar-end">
        <!-- TODO: Update as needed -->
        <a class="navbar-item" href="grade.html" title="Releases">
          <span class="icon"><i class="fas fa-tasks"></i></span>
          <span>Releases</span>
        </a>

        <a class="navbar-item" href="about.html" title="About">
          <span class="icon"><i class="fas fa-info-circle"></i></span>
          <span>About</span>
        </a>
      </div>
    </div>
  <!-- </div> -->
</nav>
<!-- End page navigation -->

<!-- Mobile menu responsiveness -->
<!-- https://bulma.io/documentation/components/navbar/ -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  if ($navbarBurgers.length > 0) {
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {
        const target = el.dataset.target;
        const $target = document.getElementById(target);
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
      });
    });
  }
});
</script>