<nav class="navbar navbar-expand-xl bg-body-tertiary">
  <div class="container">
    <!--Brand logo -->
    {% include 'includes/brand.html' %}
    <!-- Left fields -->
    {% if request.user.is_authenticated %}
    <div class="collapse navbar-collapse" id="navbarSupportedContent">   
      <ul class="navbar-nav ml-auto mb-2 mb-lg-0 me-md-auto">
        <!-- Menu -->
        {% include 'includes/menu.html' %}
        <!-- Storage -->
        {% include 'includes/storage.html' %}
      </ul>
      <!-- Search -->
      {% include 'includes/search.html' %}
      <!-- Right fields -->
      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
        <!-- User settings -->
        {% include 'includes/extra_menu.html' %}
        <!-- Separator -->
        <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
          <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
          <hr class="d-lg-none my-2 text-white-50">
        </li>
        <!-- Theme switcher-->
        <li class="nav-item dropdown">
          <div class="dropdown bd-mode-toggle">
            {% include 'includes/theme_switcher.html' %}
          </div>
        </li>
      </ul>
    </div>
    {% endif %}
  </div>
</nav>