<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>