site_logiciels/pages/index.vue

<template>
  <LayoutNavigation />
  <div v-if="shouldShowStickyMenu && !mdAndDown" id="sticky-menu">
    <CommonStickyMenu
      :shouldShowStickyMenu="shouldShowStickyMenu"
      :squaresData="squaresData"
    />
  </div>
  <div v-if="mdAndDown">
    <div class="sticky-menu">
      <v-btn color="primary">Nous contacter</v-btn>
      <v-btn color="secondary">Nous appeler</v-btn>
    </div>
  </div>
  <HomeCaroussel />

  <HomePromotion />
  <HomeSolution />
  <div class="spacer"></div>
  <HomeEventAgenda />
  <HomeBesoin />
  <HomeReviews />
  <HomeHelp />
  <LayoutFooterPrefooter />
  <LayoutFooter id="layout-footer" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useDisplay } from "vuetify";

const { mdAndDown } = useDisplay();
const router = useRouter();

const shouldShowStickyMenu = ref(true);

const squaresData = [
  {
    id: 1,
    bgColor: "green-square",
    iconClass: "fa-regular fa-comments icon",
    text: "Nous contacter",
    url: "/nous-contacter",
  },
  {
    id: 4,
    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: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: white;
  z-index: 100;
}
.spacer {
  height: 2rem;
}
#sticky-menu {
  position: sticky;
  top: 30rem;
  z-index: 1;
  margin-bottom: -32rem;
  float: right;
}

@media (max-width: 1800px) {
  #sticky-menu {
    top: 26rem;
    margin-bottom: -28rem;
  }
}
</style>