index.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <LayoutNavigation />
  3. <div v-if="shouldShowStickyMenu" id="sticky-menu">
  4. <LayoutUIStickyMenu
  5. :shouldShowStickyMenu="shouldShowStickyMenu"
  6. :squaresData="squaresData"
  7. />
  8. </div>
  9. <HomeCaroussel />
  10. <HomePromotion />
  11. <HomeSolution />
  12. <HomeEventAgenda />
  13. <HomeBesoin />
  14. <HomeReviews />
  15. <!-- <HomeNews /> -->
  16. <HomeHelp />
  17. <LayoutPrefooter id="layout-footer" />
  18. <LayoutFooter id="layout-footer" />
  19. </template>
  20. <script setup>
  21. import { ref, onMounted } from "vue";
  22. import { useRouter } from 'vue-router';
  23. const router = useRouter();
  24. const shouldShowStickyMenu = ref(true);
  25. const squaresData = [
  26. {
  27. id: 1,
  28. bgColor: "green-square",
  29. iconClass: "fa-regular fa-comments icon",
  30. text: "Nous contacter",
  31. url: "/nous-contacter",
  32. },
  33. {
  34. id: 2,
  35. bgColor: "green-square",
  36. iconClass: "fa-solid fa-circle-info icon",
  37. text: "Demander une demo",
  38. url: "/nous-contacter",
  39. },
  40. {
  41. id: 3,
  42. bgColor: "green-square",
  43. iconClass: "fa-brands fa-readme icon",
  44. text: "Brochure",
  45. url: "https://www.opentalent.fr/fileadmin/stockage/commercial/plaquettes_commerciales/De%CC%81pliant-school_23.pdf",
  46. },
  47. {
  48. id: 4,
  49. bgColor: "darkblue-square",
  50. iconClass: "fa-solid fa-phone icon",
  51. text: "Nous Appeler"
  52. },
  53. ];
  54. onMounted(() => {
  55. const stickyMenu = document.getElementById("sticky-menu");
  56. const footer = document.getElementById("layout-footer");
  57. const observer = new IntersectionObserver(
  58. ([entry]) => {
  59. shouldShowStickyMenu.value = !entry.isIntersecting;
  60. },
  61. {
  62. root: null,
  63. threshold: 0,
  64. }
  65. );
  66. observer.observe(footer);
  67. });
  68. </script>
  69. <style scoped>
  70. #sticky-menu {
  71. position: sticky;
  72. top: 20rem;
  73. z-index: 1;
  74. margin-bottom: -32rem;
  75. float: right;
  76. }
  77. @media (max-width: 1800px) {
  78. #sticky-menu {
  79. top: 16rem;
  80. margin-bottom: -28rem;
  81. }
  82. }
  83. </style>