Hector (Fixed)

<div class="fixed top-0 right-0 flex justify-end gap-1.5 right-5 md:right-7.5 z-50" x-data="fixedElementToHeader()">

    <div x-ref="hector" class="flex justify-end gap-1.5 right-5 md:right-7.5 z-50 relative">

        <div x-data="{isHectorOpen : false}" class="bg-hector text-white rounded-button flex overflow-hidden group absolute right-[108px] z-[80]">

            <div class="overflow-hidden w-max max-w-[70vw]">

                <div :class="{'hidden': !isHectorOpen}" class="hidden p-5 md:p-7 overflow-show hector">

                    Bienvenue, je suis <strong>Hector</strong>, votre <strong>copilote</strong> et je vous accompagne dans toutes vos démarches mobilités. Pour apprendre à me découvrir davantage, <a href="#">c’est par ici</a> !<br>Si vous me connaissez déjà, pensez à vous identifier en cliquant sur “Se connecter”, en haut de page !

                </div>

            </div>

            <button @click="isHectorOpen = !isHectorOpen"

                    class="h-full group-hover:bg-text-light transition duration-300 cursor-pointer flex border-[#202833E5]"

                    :class="{

                        'group-hover:bg-text-light h-12': !isHectorOpen,

                        'hover:bg-text-light items-start border-l h-auto': isHectorOpen

                    }"

            >

                <span class="h-full px-4 py-5 transition duration-300 border-r border-[#202833E5] flex items-start"

                >

                    <span :class="{'rotate-180': isHectorOpen}" class="block">

                        <?= icon('chevron-left', 'w-2 text-white') ?>

                    </span>

                </span>

                <span class="inline-block px-4 py-2.75"><?= icon('copilote', 'w-[73px]') ?></span>



            </button>

        </div>

        <div>

            <button class="bg-hector hover:bg-text-light w-[48px] h-[48px] flex justify-center items-center rounded-button transition duration-300">

                <?= icon('phone-ring', 'w-5 text-white') ?>

            </button>

        </div>

        <div>

            <a href="#" class="bg-hector hover:bg-text-light w-[48px] h-[48px] flex justify-center items-center rounded-button transition duration-300">

                <?= icon('calendar-squared', 'w-5 text-white') ?>

            </a>

        </div>

    </div>



    <script>

        function fixedElementToHeader() {

          return {

            init() {

              const header = document.querySelector('[data-header]');

              this.$root.style.top = (header.offsetHeight + 20 ) + "px";

            }

          }

        }

    </script>

</div>