nopaque/app/templates/_base/navbar.html.j2

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper primary-color">
      {% if current_user.is_authenticated %}
      <!-- menu icon -->
      <!-- small/medium devices -->
      <a href="#!" class="sidenav-trigger" data-target="sidenav"><i class="material-icons">menu</i></a>
      {% endif %}

      <!-- nopaque logo+wordmark -->
      <!-- small/medium devices -->
      <a href="{{ url_for('main.index') }}" class="brand-logo center hide-on-large-only" style="height: 100%;">
        <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3" style="height: 100%;">
      </a>
      <!-- large devices -->
      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%;">
        <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="p-3" style="height: 100%;">
      </a>

      <!-- right aligned navigation links -->
      <!-- large devices -->
      <ul class="right hide-on-med-and-down" style="height: 100%;">
        {% if current_user.is_authenticated %}
        <!-- avatar, username and email -->
        <li style="height: 100%;">
          <a href="#!" class="dropdown-trigger no-autoinit" data-target="nav-account-dropdown-content" id="nav-account-dropdown-trigger" style="height: 100%;">
            <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="left circle py-3" style="height: 100%;">
            <span class="ml-1">{{ current_user.username }} ({{ current_user.email }})</span>
          </a>
        </li>
        {% else %}
        <!-- log in -->
        <li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
          <a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a>
        </li>
        <!-- register -->
        <li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
          <a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a>
        </li>
        {% endif %}
      </ul>
    </div>
  </nav>
</div>