Hector (Sticky)

<div class="top-0 right-0 "

     x-data="stickyElementToHeader()"

     @scroll.window="scroll()"

>

    <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 stickyElementToHeader() {

          return {

            headerHeight: 0,

            init() {

              if(document.querySelector('[data-header]')) {

                this.headerHeight = document.querySelector('[data-header]').offsetHeight;

              }

              this.fixHector()

            },

            scroll() {

              this.fixHector();

            },

            fixHector() {

              if(this.$root.getBoundingClientRect().top <= this.headerHeight) {

                this.$refs.hector.classList.add('fixed');

                this.$refs.hector.classList.remove('relative');

                this.$refs.hector.style.top = (this.headerHeight + 20 ) + "px";

              } else {

                this.$refs.hector.classList.remove('fixed');

                this.$refs.hector.classList.add('relative');

                this.$refs.hector.style.removeProperty('top');

              }

            }

          }

        }

    </script>

</div>