site_logiciels/components/Common/ActionMenu.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)
-->
<template>
  <!-- Écrans larges : menu lateral, accroché au bord droit de l'écran -->
  <div class="sticky-menu lateral" v-if="lgAndUp">
    <v-row
      v-for="(action, index) in actionsOrDefault"
      :key="index"
      :class="['square', action.color]"
      @click="() => onActionClick(action)"
    >
      <NuxtLink :to="action.url" class="link">
        <div>
          <v-icon
            :class="action.icon"
          />

          <p class="text-square mt-2">
            {{ action.text }}
          </p>
        </div>
      </NuxtLink>
    </v-row>
  </div>

  <!-- Petits écrans : 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.color]"
      @click="() => onActionClick(action)"
    >
      {{ action.text }}
    </v-btn>
  </div>
</template>

<script setup lang="ts">
import { useDisplay } from "vuetify";
import { useLayoutStore } from "~/stores/layoutStore";
import { ActionMenuItemType } from "~/types/enum/layout";
import { ActionMenuItem } from "~/types/interface";

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

const telephoneNumber = "09 72 12 60 17";

// Actions par défaut du menu, peut-être surchargé via la propriété `actions`
const defaultActions: Array<ActionMenuItem> = [
  {
    type: ActionMenuItemType.FOLLOW_LINK,
    color: "secondary",
    icon: "far fa-comments",
    text: "Nous contacter",
    url: "/nous-contacter",
  },
  {
    type: ActionMenuItemType.CALL_US,
    color: "primary",
    icon: "fas fa-phone",
    text: "Nous Appeler",
  },
];

const props = defineProps({
  /**
   * Actions accessibles via le menu (par défaut : "Nous contacter", "Nous appeler")
   */
  actions: {
    type: Array<ActionMenuItem>,
    required: false,
    default: []
  }
})

const actionsOrDefault: ComputedRef<Array<ActionMenuItem>> = 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: ActionMenuItem) => {
  switch (action.type) {
    case ActionMenuItemType.ASK_FOR_A_DEMO:
      router.push({ path: action.url, query: { request: "demo" } });
      break;

    case ActionMenuItemType.CALL_US:
      callUs()
      break;

    case ActionMenuItemType.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;
  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;

  .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;
}

.primary {
  background: var(--action-menu-primary-color);
  color: var(--action-menu-on-primary-color);

  a {
    color: var(--action-menu-on-primary-color);
  }
}

.secondary {
  background: var(--action-menu-secondary-color);
  color: var(--action-menu-on-secondary-color);

  a {
    color: var(--action-menu-on-secondary-color);
  }
}
</style>