Etat Pur Design System

Account Menu 

<script>
    function dropdown() {
        return {
            expanded: false,
            get isMobile() {
                return this.$store.screen.isMobile;
            },
            init() {
                this.expanded = !this.isMobile;
            },
            toggleExpanded() {
                if (this.isMobile) {
                    this.expanded = !this.expanded;
                }
            },
            outsideClick() {
                if (this.isMobile) {
                    this.expanded = false;
                }
            },
        };
    }
</script>

<div x-data="dropdown()" x-init="init()" id="dropdown-container" @click.outside="outsideClick" class="relative w-full bg-white accordion-dark" aria-labelledby="dropdown-mon-compte">
    <div class="md:pointer-events-none max-md:border border-black md:border-b-2 md:border-brand-500 md:pb-4">
        <button @click="toggleExpanded" type="button" class="w-full flex justify-between items-center max-md:p-3 text-body-lg font-bold" :aria-expanded="expanded" aria-controls="dropdown-content" id="dropdown-mon-compte">
            <span>Mon compte</span>
            <span :class="expanded ? 'rotate-180' : ''" class="transition-transform md:hidden">
                <svg class=" shrink-0" width="20" height="20" 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 x-cloak x-show="expanded" x-transition id="dropdown-content" class="
            flex flex-col py-4 gap-2
            max-md:absolute max-md:top-full max-md:left-0 max-md:z-20
            max-md:w-full max-md:border max-md:border-gray-200 max-md:shadow-4 max-md:bg-white max-md:p-2
        ">
        <a href="#" class="flex items-center justify-between text-body-sm min-h-6 max-md:py-1 max-md:px-2 md:!text-brand-700 hover:max-md:bg-black/04 hover:md:text-neutral-900 hover:md:underline">
            <span>Mon dashboard</span>
        </a>
        <a href="#" class="flex items-center justify-between text-body-sm min-h-6 max-md:py-1 max-md:px-2  hover:max-md:bg-black/04 hover:md:text-neutral-900 hover:md:underline">
            <span>Mon profil</span>
        </a>
        <a href="#" class="flex items-center justify-between text-body-sm min-h-6 max-md:py-1 max-md:px-2  hover:max-md:bg-black/04 hover:md:text-neutral-900 hover:md:underline">
            <span>Mes adresses</span>
        </a>
        <a href="#" class="flex items-center justify-between text-body-sm min-h-6 max-md:py-1 max-md:px-2  hover:max-md:bg-black/04 hover:md:text-neutral-900 hover:md:underline">
            <span>Mes commandes</span>
        </a>
        <a href="#" class="flex items-center justify-between text-body-sm min-h-6 max-md:py-1 max-md:px-2  hover:max-md:bg-black/04 hover:md:text-neutral-900 hover:md:underline">
            <span>Mon programme de fidélité</span>
        </a>
        <a href="#" class="flex items-center justify-between text-body-sm min-h-6 max-md:py-1 max-md:px-2  hover:max-md:bg-black/04 hover:md:text-neutral-900 hover:md:underline">
            <span>Mon Expérience Naos</span>
        </a>

        <a href="#" type="button" class="max-md:self-start md:justify-center mt-2  btn  btn-dark  btn-outline  btn-size-sm">
            Me déconnecter

        </a>
    </div>
</div>
 
<script>
	function dropdown() {
		return {
			expanded: false,
			get isMobile() {
				return this.$store.screen.isMobile;
			},
			init() {
				this.expanded = !this.isMobile;
			},
			toggleExpanded() {
				if (this.isMobile) {
					this.expanded = !this.expanded;
				}
			},
			outsideClick() {
				if (this.isMobile) {
					this.expanded = false;
				}
			},
		};
	}
</script>

<div x-data="dropdown()"
     x-init="init()"
     id="dropdown-container"
     @click.outside="outsideClick"
     class="relative w-full bg-white accordion-dark"
     aria-labelledby="dropdown-mon-compte"
>
    <div class="md:pointer-events-none max-md:border border-black md:border-b-2 md:border-brand-500 md:pb-4">
        <button
                @click="toggleExpanded"
                type="button"
                class="w-full flex justify-between items-center max-md:p-3 text-body-lg font-bold"
                :aria-expanded="expanded"
                aria-controls="dropdown-content"
                id="dropdown-mon-compte"
        >
            <span>{{ title | default('Mon compte') }}</span>
            <span :class="expanded ? 'rotate-180' : ''" class="transition-transform md:hidden">
        {% render "@icons-heroicons--chevron-down-mini" %}
      </span>
        </button>
    </div>

    <div
        x-cloak
        x-show="expanded"
        x-transition
        id="dropdown-content"
        class="
            flex flex-col py-4 gap-2
            max-md:absolute max-md:top-full max-md:left-0 max-md:z-20
            max-md:w-full max-md:border max-md:border-gray-200 max-md:shadow-4 max-md:bg-white max-md:p-2
        "
    >
        {% for item in items %}
            <a href="{{ item.url }}" class="flex items-center justify-between text-body-sm min-h-6 max-md:py-1 max-md:px-2 {{ item.label == currentPage ? 'md:!text-brand-700' : '' }} hover:max-md:bg-black/04 hover:md:text-neutral-900 hover:md:underline">
                <span>{{ item.label }}</span>
                {% if item.current %}
                    <span aria-hidden="true" class="text-brand-700 max-md:inline md:hidden">
                        {% render "@icons-heroicons--check-outline" %}
                      </span>
                {% endif %}
            </a>
        {% endfor %}


        {% render "@template-button" with {
            label: "Me déconnecter",
            href: "#",
            type: "outline",
            color: "dark",
            size: "sm",
            button_class: "max-md:self-start md:justify-center mt-2"
        } %}
    </div>
</div>
 
{
  "title": "Mon compte",
  "items": [
    {
      "label": "Mon dashboard",
      "url": "#"
    },
    {
      "label": "Mon profil",
      "url": "#"
    },
    {
      "label": "Mes adresses",
      "url": "#"
    },
    {
      "label": "Mes commandes",
      "url": "#"
    },
    {
      "label": "Mon programme de fidélité",
      "url": "#"
    },
    {
      "label": "Mon Expérience Naos",
      "url": "#"
    }
  ],
  "currentPage": "Mon dashboard",
  "logout_label": "Me déconnecter"
}

No notes defined.