{% set menu_classes =
  menu_classes|default([])|merge(['social-menu', 'hg:flex', 'hg:flex-row', 'hg:gap-4', 'hg:list-none', 'hg:p-0'])|filter(v => v is not empty)
%}

<ul class="{{ menu_classes|join(' ') }}">
  {% for item in items|default(storybook.items) %}
    <li class="social-menu--item">
      <a
        href="{{ item.url }}"
        aria-label="Follow us on {{ item.title|striptags|trim }}"
        target="_blank"
        rel="noopener noreferrer"
        class="social-menu--icon hg:align-center hg:flex hg:aspect-square hg:w-[24px] hg:opacity-60 hg:hover:opacity-100"
      >
        {{ item.icon }}
        <span class="ui-icons-menu-text">{{ item.title }}</span>
      </a>
    </li>
  {% endfor %}
</ul>
