{% extends "includes/nav.html" %}
{% load combo gadjo pwa %}

{% block menu %}
  {{ block.super }}

  {% skeleton_extra_placeholder top-links %}
  {% include 'includes/user-info.html' %}
{% end_skeleton_extra_placeholder %}
{% endblock %}

{% block nav-button-script %}
  <script type="module">
    const nav_el = document.getElementById('nav');
    const nav_button = document.getElementById('nav-button');
    const nav_button_label = document.getElementById('nav-button--label');

    nav_button.setAttribute('aria-expanded', false);
    nav_button.setAttribute('aria-controls', 'nav');

    function handleOpenMenu() {
      nav.classList.add('visible');
      nav_button_label.textContent = 'Fermer le menu';
      nav_button.setAttribute('aria-expanded', true);
      window.addEventListener('keydown', handleEscapeKey);
    }

    function handleCloseMenu() {
      nav.classList.remove('visible');
      nav_button_label.textContent = 'Ouvrir le menu';
      nav_button.setAttribute('aria-expanded', false);
      window.removeEventListener('keydown', handleEscapeKey);
    }

    function handleEscapeKey(e) {
      if (e.key == "Escape") {
        nav_button.classList.remove('toggled');
        handleCloseMenu();
      }
    }

    nav_button.addEventListener('click', function() {
      if (nav_button.classList.toggle('toggled')) {
        handleOpenMenu();
      } else {
        handleCloseMenu();
      }
    });
  </script>
{% endblock %}