{% comment %}Menu na telefonie - przycisk z trzema kreskami i panel pod paskiem.

   Poziomy pasek zakladek nie miesci sie na waskim ekranie: pozycje lamia sie
   na kilka rzedow i zjadaja pol pierwszego ekranu. Dlatego ponizej `lg` paska
   nie ma wcale (naglowki szablonow chowaja go), a cale menu - pozycje,
   podstrony i kategorie - siedzi pod tym przyciskiem.

   Rozwija je znacznik <details>, wiec menu dziala bez skryptu; skrypt
   w templates/base.html doklada tylko zamykanie klawiszem Esc i stuknieciem
   obok (klasa `nav-pop`). Panel wisi pod calym naglowkiem (`inset-x-0
   top-full`), a nie pod samym przyciskiem - dzieki temu wychodzi na pelna
   szerokosc ekranu bez wzgledu na to, w ktorym miejscu paska stoi przycisk.
   Zaczepia sie o `<header>`, ktory jest przyklejony albo ma klase `relative`.

   Uklad "Menu wysuwane" (Ustawienia > Nawigacja serwisu) ma wlasny przycisk
   na kazdej szerokosci - nav_drawer.html - wiec tam drugiego nie dokladamy.{% endcomment %}
{% if site_settings.nav_layout != 'drawer' %}{% if nav.items or nav.categories %}
<details class="nav-pop group lg:hidden">
  <summary class="flex cursor-pointer list-none items-center gap-2 border border-site-border p-2.5 hover:border-brand-600 hover:bg-brand-600 hover:text-white dark:border-site-border-dark">
    <span class="group-open:hidden">{% include 'partials/icon.html' with icon='menu' %}</span>
    <span class="hidden group-open:block">{% include 'partials/icon.html' with icon='close' %}</span>
    <span class="sr-only">Menu</span>
  </summary>

  {% comment %}Dlugie menu nie moze urosnac na caly ekran - panel konczy sie
     na 70% wysokosci okna i dalej sie przewija.{% endcomment %}
  <div class="absolute inset-x-0 top-full z-40 max-h-[70vh] overflow-y-auto border-t-2 border-t-brand-600 bg-site-surface px-3 py-3 text-site-text shadow-2xl shadow-black/30
              sm:px-5 dark:bg-site-surface-dark dark:text-site-text-dark dark:shadow-black/60">
    {% include 'public/partials/nav_column.html' %}
    {% comment %}Przycisk z nagłówka (header_icons.html) - na wąskim ekranie
       nie mieści się obok logo, więc tu stoi na końcu menu.{% endcomment %}
    {% if site_settings.header_cta_label and site_settings.header_cta_url %}
      <a href="{{ site_settings.header_cta_url }}" class="btn-primary mt-3 w-full sm:hidden">{{ site_settings.header_cta_label }}</a>
    {% endif %}
  </div>
</details>
{% endif %}{% endif %}