{% comment %}Jedna pozycja poziomego menu - wyglad wlasny projektu.

   Zakladka z podstronami rozwija je po najechaniu, a na ekranie dotykowym
   otwiera ja strzalka obok tekstu - dzieki temu stukniecie w zakladke nie
   zabiera od razu na strone nadrzedna. Wyglad: zwykla wielkosc liter, brak
   tla i cienka kreska w kolorze wiodacym pod pozycja, na ktora patrzy
   kursor. Reguly `.nav-drop*` i ich przelacznik stoja
   w templates/base.html.{% endcomment %}
{% if item.children %}
  <div class="nav-drop">
    {% if item.url %}
      <div class="nav-drop-trigger flex items-center">
        <a href="{{ item.url }}"{% if item.new_tab %} target="_blank" rel="noopener"{% endif %}
           class="border-b-2 border-b-transparent py-2 pl-3 pr-1 hover:border-b-brand-600 hover:text-brand-600 dark:hover:border-b-brand-400 dark:hover:text-brand-400">{{ item.title }}</a>
        <button type="button" class="nav-drop-toggle py-2 pl-1 pr-3 hover:text-brand-600 dark:hover:text-brand-400"
                aria-expanded="false" aria-label="{{ item.title }} &ndash; poka&#380; podstrony">
          <span aria-hidden="true" class="nav-drop-caret text-xs">&#9662;</span>
        </button>
      </div>
    {% else %}
      <button type="button" aria-expanded="false"
              class="nav-drop-trigger nav-drop-toggle flex items-center gap-1.5 border-b-2 border-b-transparent px-3 py-2 hover:border-b-brand-600 hover:text-brand-600 dark:hover:border-b-brand-400 dark:hover:text-brand-400">
        {{ item.title }}<span aria-hidden="true" class="nav-drop-caret text-xs">&#9662;</span>
      </button>
    {% endif %}

    <div class="nav-drop-panel left-0">
      <div class="mt-1 w-60 max-w-[calc(100vw-2rem)] border border-site-border bg-site-surface p-1.5 text-site-text shadow-lg shadow-slate-900/10
                  dark:border-site-border-dark dark:bg-site-surface-dark dark:text-site-text-dark dark:shadow-black/50">
        {% for child in item.children %}
          <a href="{{ child.url }}"{% if child.new_tab %} target="_blank" rel="noopener"{% endif %}
             class="block px-3 py-2 text-sm font-normal hover:bg-brand-600 hover:text-white">{{ child.title }}</a>
        {% endfor %}
      </div>
    </div>
  </div>
{% else %}
  <a href="{{ item.url }}"{% if item.new_tab %} target="_blank" rel="noopener"{% endif %}
     class="border-b-2 border-b-transparent px-3 py-2 hover:border-b-brand-600 hover:text-brand-600 dark:hover:border-b-brand-400 dark:hover:text-brand-400">{{ item.title }}</a>
{% endif %}