site_logiciels/components/Common/StickyMenu.vue

<!--
Menu d'actions rapides (appel, contact, ...), qui reste accroché au bord droit
de l'écran (ou au bas de l'écran sur les petits écrans)
-->
<!-- TODO: implémenter le theming ici -->
<template>
  <!-- Écrans larges : menu lateral -->
  <div class="sticky-menu lateral" 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>

  <!-- Petits : menu sous forme de bandeau en pied de page (sauf si le footer du site est visible) -->
  <div class="sticky-menu band" v-else-if="!layoutStore.isFooterVisible">
    <v-btn
      v-for="(action, index) in actionsOrDefault"
      :key="index"
      :class="[action.bgColor]"
      @click="() => onActionClick(action)"
    >
      {{ action.text }}
    </v-btn>
  </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 { isMobileDevice } = useClientDevice()

// TODO: passer en conf?
const telephoneNumber = "09 72 12 60 17";

// Actions par défaut du menu, peut-être surchargé via la propriété `actions`
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 accessibles via le menu (par défaut: "Nous contacter", "Nous appeller")
   */
  actions: {
    type: Array<StickyMenuAction>,
    required: false,
    default: []
  }
})

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

const callUs = () => {
  if (isMobileDevice()) {
    window.location.href = `tel:${telephoneNumber}`;
  } else {
    alert(`Notre numéro de téléphone : ${telephoneNumber}`);
  }
}

/**
 * On a cliqué sur une des actions du menu
 * @param action
 */
const onActionClick = (action: StickyMenuAction) => {
  switch (action.type) {
    case StickyMenuActionType.ASK_FOR_A_DEMO:
      router.push({ path: action.url, query: { request: "demo" } });
      break;

    case StickyMenuActionType.CALL_US:
      callUs()
      break;

    case StickyMenuActionType.FOLLOW_LINK:
      if (!action.url) {
        throw Error('Missing prop : url')
      }
      router.push({ path: action.url });
      break

    default:
      throw Error('Unrecognized action')
  }
};


</script>

<style scoped lang="scss">

.sticky-menu {
  z-index: 100;
}

// Menu format lateral (pour affichage écrans larges)
.sticky-menu.lateral {
  position: sticky;
  right: 0;
  top: 60%;
  transform: translateY(-50%);
  float: right;

  display: flex;
  flex-direction: column;
  color: var(--on-primary-color);
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

// 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: var(--neutral-color);

  .v-btn {
    margin: 4px 6px;
  }
}

.square {
  position: relative;
  font-family: "Barlow", serif;
  width: 7rem;
  padding: 1rem;
  cursor: pointer;

  transition: transform 0.3s ease-in-out;
}

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

.link {
  text-decoration: none;
  color: var(--on-primary-color);
}

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

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

.red-square {
  background: #d8050b;
}

.blue-square {
  background: #2093be;
}

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

.darkblue-square {
  background: #0e2d32;
}
</style>