{% comment %}Menu w kolumnie - układ "Kolumna kategorii z lewej" oraz zawartość
   menu wysuwanego. Kategorie stoją pod pozycjami, bez rozwijania.

   Pozycje są rozdzielone włosowa linia, a najechanie maluje cała pozycje
   kolorem wiodącym - tak samo jak zakładki w grafitowym pasku.{% endcomment %}
<nav class="divide-y divide-site-border text-sm font-semibold dark:divide-site-border-dark">
  {% for item in nav.items %}
    {% if item.url %}
      <a href="{{ item.url }}"{% if item.new_tab %} target="_blank" rel="noopener"{% endif %}
         class="block px-3 py-2.5 hover:bg-brand-600 hover:text-white">{{ item.title }}</a>
    {% else %}
      <p class="px-3 py-2.5 text-[0.7rem] uppercase tracking-[0.22em] text-site-muted dark:text-site-muted-dark">{{ item.title }}</p>
    {% endif %}
    {% for child in item.children %}
      <a href="{{ child.url }}"{% if child.new_tab %} target="_blank" rel="noopener"{% endif %}
         class="block py-2.5 pl-7 pr-3 font-normal hover:bg-brand-600 hover:text-white">{{ child.title }}</a>
    {% endfor %}
  {% endfor %}

  {% if nav.categories %}
    <p class="px-3 pb-2 pt-5 text-[0.7rem] uppercase tracking-[0.22em] text-site-muted dark:text-site-muted-dark">Kategorie</p>
    {% for category in nav.categories %}
      <a href="{{ category.url }}" class="block px-3 py-2.5 font-normal hover:bg-brand-600 hover:text-white">{{ category.title }}</a>
    {% endfor %}
  {% endif %}
</nav>