Alain Afflelou Design System

Store Switcher Mobile 

<div class="flex rounded-full bg-neutral-150 p-1 gap-1">
    <button type="button" @click="" :class="!showStoreList ? 'bg-white text-neutral-800' : 'bg-transparent text-neutral-500'" class="w-full !px-4  btn btn-light  btn-only-icon">
        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 6C4.5 5.17157 5.17157 4.5 6 4.5H6.1C6.92843 4.5 7.6 5.17157 7.6 6C7.6 6.82843 6.92843 7.5 6.1 7.5H6C5.17157 7.5 4.5 6.82843 4.5 6ZM10.25 6C10.25 5.58579 10.5858 5.25 11 5.25H19C19.4142 5.25 19.75 5.58579 19.75 6C19.75 6.41421 19.4142 6.75 19 6.75H11C10.5858 6.75 10.25 6.41421 10.25 6ZM4.5 12C4.5 11.1716 5.17157 10.5 6 10.5H6.1C6.92843 10.5 7.6 11.1716 7.6 12C7.6 12.8284 6.92843 13.5 6.1 13.5H6C5.17157 13.5 4.5 12.8284 4.5 12ZM10.25 12C10.25 11.5858 10.5858 11.25 11 11.25H19C19.4142 11.25 19.75 11.5858 19.75 12C19.75 12.4142 19.4142 12.75 19 12.75H11C10.5858 12.75 10.25 12.4142 10.25 12ZM4.5 18C4.5 17.1716 5.17157 16.5 6 16.5H6.1C6.92843 16.5 7.6 17.1716 7.6 18C7.6 18.8284 6.92843 19.5 6.1 19.5H6C5.17157 19.5 4.5 18.8284 4.5 18ZM10.25 18C10.25 17.5858 10.5858 17.25 11 17.25H19C19.4142 17.25 19.75 17.5858 19.75 18C19.75 18.4142 19.4142 18.75 19 18.75H11C10.5858 18.75 10.25 18.4142 10.25 18Z" fill="currentColor" />
        </svg>

    </button>
    <button type="button" @click="" :class="showStoreList ? 'bg-white text-neutral-800' : 'bg-transparent text-neutral-500'" class="w-full !px-4  btn btn-light  btn-only-icon">
        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.25 1.8379C17.25 0.744889 16.0765 0.0339971 15.0792 0.522807L12.1708 1.94822C11.7485 2.15518 11.2515 2.15518 10.8292 1.94822L7.17082 0.155226C6.74853 -0.0517419 6.25147 -0.0517422 5.82918 0.155226L1.57918 2.23818C1.071 2.48724 0.75 2.99636 0.75 3.55328V14.1621C0.75 15.2551 1.92347 15.966 2.92082 15.4772L5.82918 14.0518C6.25147 13.8448 6.74853 13.8448 7.17082 14.0518L10.8292 15.8448C11.2515 16.0517 11.7485 16.0517 12.1708 15.8448L16.4208 13.7618C16.929 13.5128 17.25 13.0036 17.25 12.4467V1.8379ZM2.25 4.46199C2.25 3.90507 2.571 3.39595 3.07918 3.14689L5.75 1.8379V12.4467L2.97361 13.8075C2.64116 13.9704 2.25 13.7334 2.25 13.3691V4.46199ZM7.25 12.4467L10.75 14.1621V3.55328L7.25 1.8379V12.4467ZM12.25 3.55328V14.1621L14.9208 12.8531C15.429 12.604 15.75 12.0949 15.75 11.538V2.63091C15.75 2.26658 15.3588 2.02961 15.0264 2.19255L12.25 3.55328Z" fill="currentColor" />
        </svg>

    </button>
</div>
 
{# store-switcher-mobile #}
<div
        class="flex rounded-full bg-neutral-150 p-1 gap-1"
>
    {% render "@template-button" with {
        color: "light",
        type: "only-icon",
        icon: {
            name: "library--list",
            size: '24'
        },
        button_class: "w-full !px-4",
        button_attribute: ('@click="' ~ onListClick ~ '" :class="!showStoreList ? \'bg-white text-neutral-800\' : \'bg-transparent text-neutral-500\'"')|replace({"\'": "'"}),
    } %}
    {% render "@template-button" with {
        color: "light",
        type: "only-icon",
        icon: {
            name: "library--maps",
            size: '24'
        },
        button_class: "w-full !px-4",
        button_attribute: ('@click="' ~ onMapClick ~ '" :class="showStoreList ? \'bg-white text-neutral-800\' : \'bg-transparent text-neutral-500\'"')|replace({"\'": "'"}),
    } %}
</div>
 
/* No context defined. */

No notes defined.