{%- comment -%}
Empezamos con los ítems que no dependen de otros e implementamos
recursivamente.
{%- endcomment -%}
{%- assign items = site.posts | where: 'layout', 'menu' | where: 'item', nil -%}
{%- assign contacto = site.posts | find: 'layout', 'contacto' -%}
{%- assign preguntas_frecuentes = site.posts | find: 'layout', 'preguntas_frecuentes' -%}

<nav class="row no-gutters position-relative navbar navbar-expand-lg d-print-block py-28 w-100 bg-primary z-index-dropdown" data-controller="menu">
  <div class="col-2 col-md-1 position-relative">
      {% assign menu-id = page.uuid | prepend: 'r-' %}
      {%- capture menu_svg -%}
        <div class="cursor-pointer stroke-body p-3">
          {% include svg/menu.svg class="w-30px" %}
        </div>
      {%- endcapture -%}
      {% include toggler/toggler_label.html id=menu-id  class=include.menu-color content=menu_svg %}

      {% capture toggled_content %}
        {% for item in items %}
          {%- include_cached item.html item=item cache_key=page.layout -%}
        {% endfor %}
      {% endcapture %}

      {% include toggler/toggler.html id=menu-id extra='data-action="toggle-media#toggle" data-menu-target="toggler"' toggled_content=toggled_content toggled_class="top-5 z-index-dropdown py-3 ml-3 mt-2 d-print-none text-nowrap bg-primary f-18" %}
    </div>

  <a href="?" class="col text-decoration-none text-uppercase body flex-grow-1 ml-4 hover-gray">
    <h1 class="f-16 f-md-26">{{ site.title }}</h1>
  </a>

  <div class="col-2 h3 text-right">
    <a href="?#contacto" class="body text-decoration-none hover-gray">
      <i aria-hidden="true" class="fa fa-fw fa-comment-o"></i>
      <span class="sr-only">{{ contacto.title }}</span>
    </a>
  </div>
</nav>