owl-map/templates/navbar.html

{% set tabs = [
  ("map", "Home"),
  ("documentation", "Documentation"),
] %}

{% macro navbar() %}
<nav id="nav" class="navbar navbar-expand navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/map">OWL Map</a>
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      {% for page, label in tabs%}
      <li class="nav-item">
        <a
          class="nav-link{% if page == active_tab %} active{% endif %}"
          href="/{{ page }}">{{ label }}</a>
      </li>
      {% endfor %}
    </ul>
    <ul class="navbar-nav">
      {% if username %}
        <li class="nav-item">
          <a class="nav-link" href="https://www.openstreetmap.org/user/{{username }}/">{{ username }}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/logout">Logout</a>
        </li>
      {% else %}
      <li v-else class="nav-item">
        <a class="nav-link" href="/login">Login with OpenStreetMap</a>
      </li>
      {% endif %}
    </ul>
  </div>
</nav>
{% endmacro %}