Etat Pur Design System

Faq Menu 

<div class="relative w-full bg-white accordion-dark" aria-labelledby="dropdown-faq">
    <div class="pointer-events-none border-b-4 border-brand-500 pb-4">
        <button type="button" class="w-full flex justify-between items-center text-body-lg font-bold" id="dropdown-faq">

            <span>Consulter tous les sujets</span>
        </button>
    </div>

    <div id="dropdown-content" class="flex flex-col py-4 gap-2">
        <a href="/faq/questions-frequentes" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold md:!text-brand-700 hover:md:text-neutral-900 hover:md:underline">
            <span class="flex items-center gap-2">
                <svg class="text-brand-700 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Questions les plus fréquentes
            </span>
        </a>
        <a href="/faq/commande" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
            <span class="flex items-center gap-2">
                <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Ma commande
            </span>
        </a>
        <a href="/faq/livraison" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
            <span class="flex items-center gap-2">
                <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Ma livraison
            </span>
        </a>
        <a href="/faq/retours" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
            <span class="flex items-center gap-2">
                <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Mes retours
            </span>
        </a>
        <a href="/faq/paiement" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
            <span class="flex items-center gap-2">
                <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Mon paiement
            </span>
        </a>
        <a href="/faq/compte-etat-pur" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
            <span class="flex items-center gap-2">
                <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Mon compte Etat Pur
            </span>
        </a>
        <a href="/faq/programme-fidelite" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
            <span class="flex items-center gap-2">
                <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Mon programme de fidélité
            </span>
        </a>
        <a href="/faq/nous-contacter" class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold  hover:md:text-neutral-900 hover:md:underline">
            <span class="flex items-center gap-2">
                <svg class="text-neutral-500 shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Nous contacter
            </span>
        </a>
    </div>
</div>
 
{# src/components/organisms/faq-menu/faq-menu.twig #}

<div class="relative w-full bg-white accordion-dark"
     aria-labelledby="dropdown-faq"
>
    <div class="pointer-events-none border-b-4 border-brand-500 pb-4">
        <button
                type="button"
                class="w-full flex justify-between items-center text-body-lg font-bold"
                id="dropdown-faq"
        >

            <span>{{ title | default('Consulter tous les sujets') }}</span>
        </button>
    </div>

    <div id="dropdown-content" class="flex flex-col py-4 gap-2">
        {% for item in items %}
            <a href="{{ item.url }}"
               class="flex items-center justify-between gap-2 text-body-base min-h-6 font-bold {{ item.label == currentPage ? 'md:!text-brand-700' : '' }} hover:md:text-neutral-900 hover:md:underline"
            >
                <span class="flex items-center gap-2">
                    {% if item.icon is defined and item.icon %}
                        {% render "@icons-" ~ item.icon.name with { size: item.icon.size, iconClass: item.label == currentPage ? 'text-brand-700' : 'text-neutral-500' } %}
                    {% endif %}
                    {{ item.label }}
                </span>
            </a>
        {% endfor %}
    </div>
</div>
 
{
  "title": "Consulter tous les sujets",
  "items": [
    {
      "label": "Questions les plus fréquentes",
      "url": "/faq/questions-frequentes",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "20"
      }
    },
    {
      "label": "Ma commande",
      "url": "/faq/commande",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "20"
      }
    },
    {
      "label": "Ma livraison",
      "url": "/faq/livraison",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "20"
      }
    },
    {
      "label": "Mes retours",
      "url": "/faq/retours",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "20"
      }
    },
    {
      "label": "Mon paiement",
      "url": "/faq/paiement",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "20"
      }
    },
    {
      "label": "Mon compte Etat Pur",
      "url": "/faq/compte-etat-pur",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "20"
      }
    },
    {
      "label": "Mon programme de fidélité",
      "url": "/faq/programme-fidelite",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "20"
      }
    },
    {
      "label": "Nous contacter",
      "url": "/faq/nous-contacter",
      "icon": {
        "name": "heroicons--question-mark-circle-outline",
        "size": "20"
      }
    }
  ],
  "currentPage": "Questions les plus fréquentes"
}

No notes defined.