<nav class="navbar is-primary" role="navigation" aria-label="Main Navigation Bar" style="padding-left:5rem; padding-right:5rem">
  <!--left side, always visible-->
  <div class="navbar-brand">
    <a class="navbar-item" href="https://judge-js.herokuapp.com">
      <img src="../public/mic.svg">
    </a>

    <!--three lines on mobile device to toggle brand-->
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <!-- the other actual navbar stuff -->
  <div class="navbar-menu">
    <!-- sticks to left side -->
    <div class="navbar-start">
      <a class="navbar-item" href="/">Home</a>
      <a class="navbar-item" href="/calendar">Calendar</a>
      <a href="/blog" class="navbar-item">Blog</a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">View</a>
        <div class="navbar-dropdown">
          <a class="navbar-item" href="/tournaments">Tournaments</a>
          <a class="navbar-item" href="/private/view/entry">Entries</a>
        </div>
      </div>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Create</a>
        <div class="navbar-dropdown">
          <a href="/private/create/blog" class="navbar-item">Blog Post</a>
          <a href="/private/create/entry" class="navbar-item">Entry</a>
        </div>
      </div>

    </div>
    <!-- sticks to the right side -->
    <div class="navbar-end">
      <a class="navbar-item" href="/private/homepage">Dashboard</a>
    </div>
  </div>
</nav>
