{% macro navbar(navbarId = "mainNavBar") %}
<div class="container content">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="{{ domain }}">{{ title }}</a>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" onclick="toggleNavbar(this)">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="{{ navbarId }}" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item" href="/shorten">
            Shorten
          </a>

          <a class="navbar-item" href="/search">
            Search
          </a>
        </div>

      {% if not anonymous %}
        <div class="navbar-end">
        {% if username is defined %}
          <div class="navbar-item">
              <div class="buttons">
                  <a class="button is-primary" href="/u/{{ hashed_username }}">{{ username }}</a>
                  <a class="button" href="/logout">Logout</a>
              </div>
          </div>
        {% else %}
          <div class="navbar-item">
            <div class="buttons">
              <a class="button is-primary" href="/signup">
                Sign up
              </a>
              <a class="button is-light" href="/login">
                Log in
              </a>
            </div>
          </div>
        {% endif %}
        </div>
      {% endif %}
      </div>
    </nav>
</div>
<script>
    let _ia = "is-active";

    function toggleNavbar(ctx) {
        let nb = document.getElementById("{{ navbarId }}");
        if(ctx.classList.contains(_ia)) {
            ctx.classList.remove(_ia);
            nb.classList.remove(_ia);
        } else {
            ctx.classList.add(_ia);
            nb.classList.add(_ia);
        }
    }
</script>
{% endmacro %}