site_logiciels/pages/opentalent_manager.vue

<template>
  <LayoutNavigation />
  <LogicielsManagerBanner />
  <LogicielsManagerMenuScroll />

  <div v-if="shouldShowStickyMenu" id="sticky-menu">

<LayoutUIStickyMenu
  :shouldShowStickyMenu="shouldShowStickyMenu"
  :squaresData="squaresData"
/>
</div>
  <LogicielsManagerPresentation />
  <LogicielsManagerAvantages />
  <LogicielsManagerFonctionnalites />
  <LogicielsManagerPyramide />
  <LogicielsManagerAccompagnement />
  <LogicielsManagerReviews />
  <LayoutFAQ />
  <LayoutUISolutionsFooter id="layout-footer" />
  <LayoutFooter />
</template>

<script setup>
import { ref, onMounted } from "vue";

const shouldShowStickyMenu = ref(true);

const squaresData = [
  {
    id: 1,
    bgColor: "red-square",
    iconClass: "fa-regular fa-comments icon",
    text: "Nous contacter",
  },
  {
    id: 2,
    bgColor: "red-square",
    iconClass: "fa-brands fa-readme icon",
    text: "Brochure",
  },
  {
    id: 3,
    bgColor: "darkblue-square",
    iconClass: "fa-solid fa-phone icon",
    text: "Nous appeler",
  }
];

onMounted(() => {
  const stickyMenu = document.getElementById("sticky-menu");
  const footer = document.getElementById("layout-footer");

  const observer = new IntersectionObserver(
    ([entry]) => {
      shouldShowStickyMenu.value = !entry.isIntersecting;
    },
    {
      root: null,
      threshold: 0,
    }
  );

  observer.observe(footer);
});
</script>

<style scoped>
#sticky-menu {
  position: sticky;
  top: 20rem;
  z-index: 1;
  margin-bottom: -30rem;
  float: right;
}
</style>