{% 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 ml-2" style="height: 100%;">
  <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3" style="height: 100%;">
</a>

<!-- right aligned navigation links -->
<!-- large devices -->
<ul class="right hide-on-med-and-down" style="height: 64px;">
  {% 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-2">{{ 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>