{% if current_user.is_authenticated %}
{# menu icon #}
{# shown for small/medium devices #}
<a href="#!" class="sidenav-trigger" data-target="sidenav"><i class="material-icons">menu</i></a>

{# nopaque logo #}
{# shown for 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.png') }}" alt="" class="mx-3 py-3" style="height: 100%;">
</a>

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

  {# processes & services #}
  <li>
    <a href="#data-processing-and-analysis-modal" class="modal-trigger">
      <i class="material-icons left">miscellaneous_services</i>
      Data Processing & Analysis
    </a>
  </li>

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

  {# social #}
  <li>
    <a href="{{ url_for('main.social') }}">
      <i class="material-icons left">groups</i>
      Social
    </a>
  </li>
</ul>
{% else %}
{# nopaque logo+wordmark+slogan #}
{# shown for 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+slogan.png') }}" alt="" class="mx-3 py-3" style="height: 100%;">
</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>

{# right aligned navigation items #}
{# large devices #}
<ul class="right hide-on-med-and-down" style="height: 64px;">
  {# manual #}
  <li class="tooltipped" 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" data-position="bottom" data-tooltip="News">
    <a href="{{ url_for('main.news') }}">
      <i class="material-icons">email</i>
    </a>
  </li>

  {% if current_user.is_authenticated %}
  {# avatar #}
  <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="circle py-3" style="height: 100%;">
    </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="waves-effect waves-light btn primary-color lighten">Register</a>
  </li>
  {% endif %}
</ul>