Etat Pur Design System

Blog Menu Category 

<script>
    'use strict';

    function accordion(expanded = false) {
        return {
            expanded: expanded,
            get isMobile() {
                return this.$store.screen.isMobile ?? false;
            },
            toggleExpanded() {
                this.expanded = !this.isMobile || !this.expanded;
            }
        };
    }
</script>

<div x-data="accordion(true)" @resize.debounce.100.window="expanded = !$store.screen.isMobile" class=" accordion-dark" aria-labelledby="accordion-619663889">
    <div class="text-body-lg font-bold pb-4 border-b-4 border-brand-500">
        <button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full md:cursor-text border-none" :aria-expanded="expanded" aria-controls="content-207863286" id="accordion-619663889">
            <span class="flex flex-wrap gap-2 ">
                <span aria-hidden="true">
                    <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg> </span>
                Categories
            </span>
            <span :class="expanded ? 'rotate-180' : ''" class="md:hidden transition-transform" aria-hidden="true">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                </svg> </span>
        </button>
    </div>
    <div id="content-207863286" x-cloak x-show="expanded || !$store.screen.isMobile" x-collapse class="pt-2">
        <div class="pt-2" :class="$store.screen.isMobile ? 'pb-4' : ''">
            <div class="flex flex-col gap-4">
                <a href="#" class="
        
         link-base
         link-dark
        
        font-bold tracking-wider
    ">

                    Etat Pur Philosophy

                </a>
                <a href="#" class="
        
         link-base
         link-dark
        
        font-bold tracking-wider
    ">

                    Ingredient Spotlight

                </a>
                <a href="#" class="
        
         link-base
         link-dark
        
        font-bold tracking-wider
    ">

                    Skincare Tips

                </a>
                <a href="#" class="
        
         link-base
         link-dark
        
        font-bold tracking-wider
    ">

                    Understand your skin

                </a>
                <a href="#" class="
        
         link-base
         link-dark
        
        font-bold tracking-wider
    ">

                    Expert Interviews

                </a>
            </div>

        </div>
    </div>
</div>
 
{% embed "@accordion--mobile-only" with {
    title: "Categories",
    expanded: true,
    accordion_button_class: "border-none",
    accordion_title_class: "text-body-lg font-bold pb-4 border-b-4 border-brand-500",
    accordion_content_class: "pt-2",
    color: 'dark',
    width: '24',
    height: '24',
    startIcon: {
        name: 'heroicons--folder-outline',
        size: 24,
        class: ''
    }
} %}
    {% block content %}
        <div class="flex flex-col gap-4">
            {% for item in items %}
                {% render "@template-link" with {
                    label: item,
                    href: "#",
                    type: 'dark',
                    size: "base",
                    link_class: "font-bold tracking-wider"
                } %}
            {% endfor %}
        </div>
    {% endblock %}
{% endembed %}
 
{
  "items": [
    "Etat Pur Philosophy",
    "Ingredient Spotlight",
    "Skincare Tips",
    "Understand your skin",
    "Expert Interviews"
  ]
}

No notes defined.