site_logiciels/components/Common/StickyMenu.vue

<template>
  <div :class="stickyClass" v-if="!mdAndDown">
    <v-row class="outil-row">
      <v-col cols="12">
        <div class="container-square">
          <v-row
            v-for="square in squares"
            :key="square.id"
            :class="['square', square.bgColor]"
            @click="() => handleSquareClick(square)"
          >
            <NuxtLink :to="square.url" class="link">
              <div>
                <v-icon :class="square.iconClass" />
                <p class="text-square mt-2">{{ square.text }}</p>
              </div>
            </NuxtLink>
          </v-row>
        </div>
      </v-col>
    </v-row>
  </div>

  <div v-if="mdAndDown">
    <div class="sticky-menu">
      <v-btn color="primary">Bouton 1</v-btn>
      <v-btn color="secondary">Bouton 2</v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import { useRouter } from "vue-router";
import { useDisplay } from "vuetify";

const { mdAndDown } = useDisplay();
const router = useRouter();
const props = defineProps({
  shouldShowStickyMenu: Boolean,
  squaresData: Array,
});

const stickyClass = ref("sticky-scroll");

const squares = ref(props.squaresData);
const telephoneNumber = "09 72 12 60 17";
const handleSquareClick = (square) => {
  if (square.id === 2) {
    router.push({ path: square.url, query: { request: "demo" } });
  } else if (square.id === 4) {
    if (isMobileDevice()) {
      window.location.href = `tel:${telephoneNumber}`;
    } else {
      alert(`Notre numéro de téléphone : ${telephoneNumber}`);
    }
  } else {
    router.push({ path: square.url });
  }
};

const isMobileDevice = () => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  );
};
</script>

<style scoped>


.sticky-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: white;
  z-index: 100;
}
.square {
  transition: transform 0.3s ease-in-out;
}

.square:hover {
  transform: translateX(-10px);
}

.link {
  text-decoration: none;
  color: white;
}

.container-square {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  color: white;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.red-square,
.yellow-square,
.blue-square,
.darkblue-square,
.green-square {
  position: relative;
  font-family: "Barlow";
  width: 7rem;
  padding: 1rem;
  cursor: pointer;
}

.yellow-square {
  background: rgb(250, 194, 10);
  color: #0e2d32;
}

.green-square {
  background: #9edbdd;
}

.red-square {
  background: #d8050b;
}

.blue-square {
  background: var(--Bleu-School-60, rgba(32, 147, 190));
}

.darkblue-square {
  background: #0e2d32;
}

.text-square {
}
</style>