Configurator : Side panel

<div class="side-modale-panel fixed inset-0 z-[80]"

     x-data="initModalSide()"

     data-modal="side-modal"

     @keydown.escape.window="close()"

     :class="{

        'block' : modalOpen,

        'hidden' : !modalOpen

     }"

     x-cloak

 >

    <div class="absolute inset-0 translate-x-full cursor-pointer opacity-40 transition duration-300 side-modale-panel__overlay bg-primary"

         :class="{

            'translate-x-0' : isOpen,

            'translate-x-full' : !isOpen

         }"

         @click="close()"

    ></div>

    <div class="side-modale-panel__content absolute z-10 right-0 top-0 bottom-0 flex flex-col transition duration-[350ms] w-full lg:max-w-[500px]"

         :class="{

            'translate-x-0' : isOpen,

            'translate-x-full' : !isOpen

         }"

    >

        <div class="ml-auto flex h-screen w-full flex-col bg-white">

            <div class="flex items-center justify-between gap-5 border-b border-ui">

                <div class="pl-7.5 font-semibold tracking-tightened">Enregistrer, imprimer, partager</div>

                <div>

                    <button @click="close()" class="link px-7.5 py-8.5 hover:text-secondary"><?= icon('close', 'w-3.25'); ?></button>

                </div>

            </div>

            <div class="py-10 flex-1">

                <div class="px-7.5 tracking-tightened pb-13 border-b border-ui">

                    <div class="font-semibold">Enregistrer dans votre compte</div>

                    <div class="font-medium">Et retrouvez-là à tout moment dans votre garage en ligne</div>

                    <button class="btn btn-secondary-grey btn-full-width mt-6">Enregistrer</button>

                </div>

                <div class="px-7.5 tracking-tightened pb-13 border-b border-ui pt-7">

                    <div class="font-semibold">Télécharger le PDF</div>

                    <div class="font-medium">Et retrouvez-là à tout moment dans votre garage en ligne</div>

                    <button class="btn btn-secondary-grey btn-full-width mt-6">Enregistrer</button>

                </div>

                <div class="px-7.5 tracking-tightened pb-13 border-b border-ui pt-7">

                    <div class="font-semibold mb-5">Envoyer la configuration par e-mail</div>

                    <div class="form-element text w-full">

                        <input name="name" class="form-input w-full" id="confogurator_send_by_email" type="text" title="Nom" placeholder=" " pattern="\S+">

                        <label class="label" for="confogurator_send_by_email">

                            <span>Votre e-mail</span>

                        </label>

                    </div>

                    <button class="btn btn-secondary-grey btn-full-width mt-2.5">Enregistrer</button>

                </div>

            </div>

            <div class="px-7.5 py-6.25 flex gap-3.25 border-t border-ui">

                <button class="btn btn-secondary-grey py-2.75 md:px-10" @click="close()">Annuler</button>

                <button class="btn btn-primary py-2.75 md:px-10 flex-1">Valider</button>

            </div>

        </div>

    </div>

</div>