{% load i18n juss_menus %}
<style>
 .navbar-burger {
   margin-left: 0 !important;
 }
 @media screen and (max-width: 1023px) {
   .navbar-menu {
     display: block !important;
     padding: 0 !important;
   }
   .navbar-end {
     display: none;
   }
 }
 @media screen and (min-width: 1024px) {
   .navbar-burger {
     display: block;
   }

 }
</style>
<nav class="navbar" style="position:sticky;top:0;box-shadow:0 3px 0 -2px rgb(10 10 10 / 10%);">

  {% comment %}
  <div class="navbar-brand">
    <a class="navbar-item subtitle" href="/admin/">
      {{request.site.setting.site_name|default:'Admin'}}
    </a>
  </div>
  {% endcomment %}
  <div id="navbarMenuHeroA" class="navbar-menu">
    <div class="navbar-start">
      {#% juss_menus request.path_info %#}
      <a class="navbar-burger is-active" role="button" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-end">
      {% if site_url %}
      <a class="navbar-item" href="/">{% translate "Go Home" %}</a>
      {% endif %}
      {% if user.is_active and user.is_staff %}
        {% url 'django-admindocs-docroot' as docsroot %}
        {% if docsroot %}
        <a href="{{ docsroot }}" class="navbar-item">{% translate "Document" %}</a>
        {% endif %}
      {% endif %}


      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          {% if enable_avatar %}
          <figure class="image is-32x32 mr-1">
            {% if user.avatar %}
            <img class="is-rounded" src="{{user.avatar}}" style="max-height:initial;" />
            {% else %}
            <svg width="32" height="32" data-jdenticon-value="{{user.username}}"></svg>
            {% endif %}
          </figure>
          <span>{{user.username}}</span>
          {% else %}
          {{user.username}}
          {% endif %}
        </a>
        <div class="navbar-dropdown is-right">
          <a class="navbar-item" href="{% url 'admin:password_change' %}">{% translate "Change Password" %}</a>
          <hr class="navbar-divider" />
          <a class="navbar-item" href="/admin/logout/">{% translate "Logout" %}</a>
        </div>
      </div>
    </div>
  </div>

</nav>