site_logiciels/components/Common/StickyMenu.vue

<template>
  <div class="sticky-menu">
    <div class="container-square" v-if="lgAndUp">
      <v-row
        v-for="(action, index) in actionsOrDefault"
        :key="index"
        :class="['square', action.bgColor]"
        @click="() => onActionClick(action)"
      >
        <NuxtLink :to="action.url" class="link">
          <div>
            <v-icon :class="action.iconClass" />
            <p class="text-square mt-2">{{ action.text }}</p>
          </div>
        </NuxtLink>
      </v-row>
    </div>

    <div class="band" v-else-if="!layoutStore.isFooterVisible">
      <v-btn color="#9edbdd">
        Nous contacter
      </v-btn>
      <v-btn color="#0e2d32" style="color: white;">
        Nous appeler
      </v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ComputedRef } from "vue";
import { useRouter } from "vue-router";
import { useDisplay } from "vuetify";
import { useLayoutStore } from "~/stores/layoutStore";
import { StickyMenuActionType } from "~/types/enum/layout";
import { StickyMenuAction } from "~/types/interface";

const { mdAndDown, lgAndUp } = useDisplay();
const router = useRouter();
const layoutStore = useLayoutStore()

const telephoneNumber = "09 72 12 60 17";

const defaultActions: Array<StickyMenuAction> = [
  {
    type: StickyMenuActionType.FOLLOW_LINK,
    bgColor: "green-square",
    iconClass: "fa-regular fa-comments icon",
    text: "Nous contacter",
    url: "/nous-contacter",
  },
  {
    type: StickyMenuActionType.CALL_US,
    bgColor: "darkblue-square",
    iconClass: "fa-solid fa-phone icon",
    text: "Nous Appeler",
  },
];

const props = defineProps({
  actions: {
    type: Array<StickyMenuAction>,
    required: false,
    default: []
  }
})

const actionsOrDefault: ComputedRef<Array<StickyMenuAction>> = computed(() => {
  return props.actions.length > 0 ? props.actions : defaultActions
})

const onActionClick = (action: StickyMenuAction) => {
  if (action.type === StickyMenuActionType.ASK_FOR_A_DEMO) {
    router.push({ path: action.url, query: { request: "demo" } });
  } else if (action.type === StickyMenuActionType.CALL_US) {
    if (isMobileDevice()) {
      window.location.href = `tel:${telephoneNumber}`;
    } else {
      alert(`Notre numéro de téléphone : ${telephoneNumber}`);
    }
  } else if (action.url) {
    router.push({ path: action.url });
  } else {
    throw Error('Unrecognized action')
  }
};

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

<style scoped lang="scss">
.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 {
}

@media (min-width: 1280px) {
  .sticky-menu {
    position: sticky;
    //right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    float: right;
  }
}

// Menu format ruban (pour affichage petits écrans)
.sticky-menu .band {
  position: fixed;
  height: 46px;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: white;
  z-index: 100;

  .v-btn {
    margin: 4px 6px;
  }
}
</style>