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

<div class="navbar-fixed">
  <nav>
    <div class="nav-wrapper">
      {# menu icon #}
      {# small/medium devices #}
      <a href="#!" class="sidenav-trigger" data-target="sidenav">
        <i class="material-icons">menu</i>
      </a>

      {% if current_user.is_authenticated %}
      {# nopaque logo #}
      {# large devices #}
      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down h-100">
        <img src="{{ url_for('static', filename='images/nopaque_-_logo.png') }}" alt="" class="mx-3 py-3 h-100">
      </a>

      {# left aligned navigation items #}
      {# large devices #}
      <ul class="hide-on-med-and-down" style="margin-left: calc(57px + 1.5rem);">
        {# dashboard #}
        <li {% if request.path == url_for('main.dashboard') %}class="active"{% endif %}>
          <a href="{{ url_for('main.dashboard') }}">
            <i class="material-icons left">dashboard</i>
            Dashboard
          </a>
        </li>

        {# data processing & analysis #}
        <li>
          <a href="#!" class="dropdown-trigger no-autoinit" data-target="navbar-data-processing-and-analysis-dropdown-content" id="navbar-data-processing-and-analysis-dropdown-trigger">
            <i class="material-icons left">miscellaneous_services</i>
            Data Processing & Analysis
          </a>
        </li>

        {# contributions #}
        <li {% if request.path == url_for('contributions.index') %}class="active"{% endif %}>
          <a href="{{ url_for('contributions.index') }}">
            <i class="material-icons left">new_label</i>
            Contributions
          </a>
        </li>

        {# social #}
        <li {% if request.path == url_for('main.social') %}class="active"{% endif %}>
          <a href="{{ url_for('main.social') }}">
            <i class="material-icons left">groups</i>
            Social
          </a>
        </li>
      </ul>
      {% else %}
      {# nopaque logo+wordmark+slogan #}
      {# large devices #}
      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down h-100">
        <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark+slogan.png') }}" alt="" class="mx-3 py-3 h-100">
      </a>
      {% endif %}

      {# nopaque logo+wordmark #}
      {# small/medium devices #}
      <a href="{{ url_for('main.index') }}" class="brand-logo center hide-on-large-only h-100">
        <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3 h-100">
      </a>

      {# right aligned navigation items #}
      {# large devices #}
      <ul class="right hide-on-med-and-down h-100">
        {# manual #}
        <li class="tooltipped {% if request.path == url_for('main.manual') %}active{% endif %}" data-position="bottom" data-tooltip="Manual">
          <a href="{{ url_for('main.manual') }}">
            <i class="material-icons">help_outline</i>
          </a>
        </li>

        {# news #}
        <li class="tooltipped {% if request.path == url_for('main.news') %}active{% endif %}" data-position="bottom" data-tooltip="News">
          <a href="{{ url_for('main.news') }}">
            <i class="material-icons">newspaper</i>
          </a>
        </li>

        {% if current_user.is_authenticated %}
        {# avatar #}
        <li class="h-100">
          <a href="#!" class="dropdown-trigger no-autoinit h-100" data-target="navbar-account-dropdown-content" id="navbar-account-dropdown-trigger">
            <span class="mr-3">{{ current_user.username }}</span>
            <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="circle py-3 h-100 right">
          </a>
        </li>
        {% else %}
        {# log in #}
        <li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
          <a href="{{ url_for('auth.login') }}">Log in</a>
        </li>

        {# register #}
        <li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
          <a href="{{ url_for('auth.register') }}" class="btn waves-effect waves-light primary-color lighten">Register</a>
        </li>
        {% endif %}
      </ul>
    </div>
  </nav>
</div>