{% load combo %}

<nav role="navigation" class="site-nav">
  <div id="nav-wrapper" class="gru-nav-wrapper">
    {% block nav-pre %}{% endblock %}
    <div id="nav" class="nav-width gru-nav">
      {% block nav-top %}{% endblock %}
      <button id="nav-button" class="gru-nav-button" aria-labelledby="nav-button--label">
        <span class="sr-only" id="nav-button--label">Ouvrir le menu</span>
        <span class="icon-bar icon-bar-1"></span>
        <span class="icon-bar icon-bar-2"></span>
        <span class="icon-bar icon-bar-3"></span>
      </button>
      {% block menu %}
        {% show_menu depth=2 ignore_visibility=True %}
        {% placeholder "menu_right" %}
      {% endblock %}
      <div class="gru-nav-mask"></div>
      {% block nav-bottom %}{% endblock %}
    </div> <!-- nav -->
    {% block nav-post %}{% endblock %}
  </div> <!-- nav-wrapper -->
</nav>

{% block nav-button-script %}
  <script>
    (function() {
      const nav_button = document.getElementById('nav-button');
      const nav_button_label = document.getElementById('nav-button--label');
      nav_button.addEventListener('click', function() {
        if (nav_button.classList.toggle('toggled')) {
          nav_button_label.textContent = 'Fermer le menu';
        } else {
          nav_button_label.textContent = 'Ouvrir le menu';
        }
      });
    })();
  </script>
{% endblock %}
