---
items:
  type: 'array'
  default: []
id:
  type: 'string'
class:
  type: 'string'
  default: 'position-fixed top-0 start-0 vh-100 w-100 bg-black z-3'
coopcloud_url:
  type: 'string'
  default: '/#'
color:
  type: 'string'
  default: 'white'
---
{%- block 'sutty/toggler/toggler_label.html', id: , class: 'py-3 ps-3' -%}
<div class="d-flex d-lg-none">
  {%- render 'svg/menu.svg', class: 'w-35px cursor-pointer', color: -%}
</div>
{%- endblock -%}

{%- block 'sutty/toggler/toggler.html', id: , class: -%}
{%- block 'sutty/toggler/toggler_label.html', id: , class: 'w-100' -%}
<div class="d-flex justify-content-end p-4">
  {%- render 'svg/x.svg', class: 'w-35px cursor-pointer', color: 'white' -%}
</div>
{%- endblock -%}
<div class="d-flex flex-column align-items-center justify-content-start p-3 w-100 h-100 text-center">
  <div class="w-150px py-2">
    <a class="navbar-brand" href="{{ coopcloud_url }}">
      {%- render 'svg/cloud.svg', color: -%}
    </a>
  </div>
  <ul class="p-0">
    {% for item in items reversed %}
      <li class="list-unstyled p-2 fw-bold {{ forloop.last | value_if: ' mb-3' }}">
        {% render 'sutty/a.html',
          content: item.title,
          href: item.post.url,
          class: 'nav-link text-white hover-secondary text-decoration-none fw-bold x-1 fs-4'
        %}
      </li>
    {% endfor %}
  </ul>
</div>
{%- endblock -%}