Slide Deck

{# Prop: data
  Example:
    data: {
        includeParent: true,
        currentPageNumber: 3,
        count: 4,
        pages: []
    }
#}
{# Desktop Slide Deck. #}
<div class="azalea-slide-deck hidden md:block sticky z-10 top-[78px] md:top-[84px] lg:top-[98px] bg-white">
  <div x-data x-disclosure default-open class="azalea-full-bleed flex flex-col bg-white">
    <button
      x-disclosure:button
      type="button"
      class="text-left w-full flex items-center justify-center space-x-4 py-2 border-b border-tertiary-200"
    >
      <span>Menu</span>
      <span
        class="ml-6 h-7 flex items-center transform transition duration-100"
        :class="$disclosure.isOpen ? '-rotate-180 ease-in' : 'rotate-0 ease-out'"
      >
        {% include "@components/icon/icon.twig" with { icon: 'chevron-down' } %}
      </span>
    </button>
    <nav x-disclosure:panel x-collapse x-cloak role="navigation" aria-label="Page Navigation">
      <div class="max-w-full py-4 md:py-6 px-12 border-b border-tertiary-200">
        {% embed "@components/slider/slider.twig" with { divide : 'false', active: data.currentPageNumber } %}
          {% block content %}
            {% if data.parent and data.includeParent %}
              {# Output the parent Page Collection as the first nav item. #}
              <div class="flex shrink-0 w-64 md:w-72 lg:w-80 pl-4 pr-2">
                {% embed "@components/tile/tile.twig" with { variant: 'compact', classes: ['h-full', 'bg-white', 'rounded-sm'] } %}
                  {% block media %}
                    <a href="{{ data.parent.path }}">
                      {% include "@components/image/image.twig" with { data: data.parent.image, use: 'small_square', classes: ['rounded-sm'] } only %}
                    </a>
                  {% endblock media %}
                  {% block header %}
                    <a href="{{ data.parent.path }}" class="azalea-text-sm text-black">
                      {{ data.parent.title }}
                    </a>
                  {% endblock header %}
                  {% block body %}{% endblock body %}
                {% endembed %}
              </div>
            {% endif %}
            {% for item in data.pages %}
              <div class="flex flex-col shrink-0 w-64 md:w-72 lg:w-80 pl-2 border-l border-tertiary-300">
                {% set isCurrentPage = (loop.index0 == data.currentPageNumber) ? 1 : 0 %}
                {% if isCurrentPage %}
                  {% set classes = ['bg-black', 'text-white'] %}
                {% else %}
                  {% set classes = ['bg-white'] %}
                {% endif %}
                {% embed "@components/tile/tile.twig" with { variant: 'compact', as: 'a', url: item.path, classes: classes|merge(['h-full', 'rounded-sm', 'hover:no-underline']) } %}
                  {% block media %}
                    {% include "@components/image/image.twig" with { data: item.image, use: 'small_square', rounded: 'true' } only %}
                  {% endblock media %}
                  {% block header %}
                    <div>
                      {% set textColor = isCurrentPage ? 'text-white' : 'text-black' %}
                      {% if data.numbered %}
                        <span class="azalea-text-md {{ textColor }}">{{ loop.index }}. </span>
                      {% endif %}
                      <span class="azalea-text-sm {{ textColor }}">{{ item.title }}</span>
                    </div>
                  {% endblock header %}
                {% endembed %}
              </div>
            {% endfor %}
          {% endblock content %}
        {% endembed %}
      </div>
    </nav>
  </div>
</div>
{# Mobile Navigation. #}
<div class="azalea-slide-deck block md:hidden my-4">
  {% embed "@components/dropdown/dropdown.twig" with { label: 'Menu', size: 'large' } %}
    {% block content %}
      <div class="px-4 max-h-96 overflow-y-auto azalea-scrollbar-hidden text-primary-900">
        {% if data.parent and data.includeParent %}
          <div class="flex items-center space-x-4 p-4 mb-2 border-b border-tertiary-200">
            {% include "@components/icon/icon.twig" with { 'icon': 'list', 'size': 'small' } only %}
            <a href="{{ data.parent.path }}" class="text-black font-semibold">{{ data.parent.title }}</a>
          </div>
        {% endif %}
        {% set tag = data.numbered ? 'ol' : 'ul' %}
        <{{ tag }} class="p-0{% if data.numbered %} azalea-list-decimal{% endif %}">
          {% for item in data.pages %}
            {% set isCurrentPage = (loop.index0 == data.currentPageNumber) ? 1 : 0 %}
            {% if isCurrentPage %}
              <li class="p-2 text-black rounded-sm bg-tertiary-100">
                <span>{{ item.title }}</span>
              </li>
            {% else %}
              <li class="p-2">
                <a href="{{ item.path }}" class="text-black">{{ item.title }}</a>
              </li>
            {% endif %}
          {% endfor %}
        </{{ tag }}>
      </div>
    {% endblock content %}
  {% endembed %}
</div>