---
class:
  type: 'string'
  default: 'bg-transparent justify-content-between px-0'
items:
  type: 'array'
  default: []
coopcloud_url:
  type: 'string'
  default: '?#'
color:
  type: 'string'
  default: 'primary'
uuid: 
  type: 'string'
  default: ''
---
<nav class="navbar d-flex w-100 align-items-center justify-content-between {{ class }} bg-primary">
  <div class="py-2">
    <a class="navbar-brand d-flex flex-row align-items-end text-decoration-none" href="{{ coopcloud_url }}">
      <div class="d-none d-md-flex w-150px">
        {%- render 'svg/cloud.svg', color: -%}
      </div>
      <div class="d-md-none d-flex w-80px">
        {%- render 'svg/cloud_text.svg', color: 'white' -%}
      </div>
    </a>
  </div>
  <div class="flex-grow-1 d-flex flex-row align-items-center justify-content-end">
    <div class="d-none d-lg-flex justify-content-end w-100">
      {% for item in items reversed %}
        {% assign class = 'nav-link text-decoration-none p-3 fs-5 fw-bold text-' | append: color %}
        {% if items.last %}
          {% assign class = class | append: ' pe-0' %}
        {% endif %}
        {% render 'sutty/a.html', 
          content: item.title, 
          href: item.post.url, 
          class: class 
        %}
      {% endfor %}
    </div>
  <div class="d-block d-lg-none">
    {%- render 'menu.html', 
      items:, 
      id: 'menu',
      coopcloud_url: '/#'
    -%}
  </div>
</nav>