read-ti-later/templates/fragments/navbar.j2

<div id="navbar" class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
    <div class="navbar-brand">Read TI Later</div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            {% if request.path == url_for('index') %}
            <li class="nav-item active">
            {% else %}
            <li class="nav-item">
            {% endif %}
                <a class="nav-link" href="{{ url_for('index') }}">My List</a>
            </li>
            {% if request.path == url_for('archived') %}
            <li class="nav-item active">
            {% else %}
            <li class="nav-item">
            {% endif %}
                <a class="nav-link" href="{{ url_for('archived') }}">Archived</a>
            </li>
            {% if request.path == url_for('bookmarklet') %}
            <li class="nav-item active">
            {% else %}
            <li class="nav-item">
            {% endif %}
                <a class="nav-link" href="{{ url_for('bookmarklet') }}">Bookmarklet</a>
            </li>
        </ul>
        <form class="form-inline ml-auto">
            {% if request.path != url_for('bookmarklet') %}
            {# <a class="btn btn-success" id="refreshButton" href="#refresh" onclick="refreshPage();" role="button" style="margin-right: 20px; display: none;">Refresh</a> #}
            <a class="toolbar-button" id="refreshButton" href="#refresh" onclick="refreshPage();" style="display: none;" data-toggle="tooltip" data-placement="bottom" title="Refresh"><svg
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#refresh-cw"/></svg></a>
            {# <a class="btn btn-info" href="#addLink" onclick="openLinkModal();" role="button" style="margin-right: 20px;">Add Link</a> #}
            <a class="toolbar-button" href="#addLink" onclick="openLinkModal();" data-toggle="tooltip" data-placement="bottom" title="Add Link"><svg
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#plus"/></svg></a>
            {% endif %}
            {# <a class="btn btn-primary" href="/logout" role="button">Logout</a> #}
            <a class="toolbar-button" href="/logout" style="padding-right: 1rem;" data-toggle="tooltip" data-placement="bottom" title="Logout"><svg
                    width="24"
                    height="24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    style="line-height: 1.5; vertical-align: middle; margin-bottom: 4px;">
                    <use xlink:href="{{url_for('.static', filename='feather-sprite.svg')}}#log-out"/></svg></a>
        </form>
    </div>        
</div>