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 v-if="lgAndUp && isVisible" class="sticky-menu lateral">
    <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 v-else-if="isVisible" class="sticky-menu band">
    <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 { useRouter } from "vue-router";
import { useDisplay } from "vuetify";
import type { ComputedRef } from "vue";
import { useLayoutStore } from "~/stores/layoutStore";
import { ActionMenuItemType } from "~/types/enum/layout";
import type { ActionMenuItem } from "~/types/interface";

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

const telephoneNumber = "09 72 12 60 17";

const isVisible: ComputedRef<boolean> = computed(
  () =>
    !layoutStore.isHeaderVisible &&
    !layoutStore.isBannerVisible &&
    !layoutStore.isFooterVisible,
);

// 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: { path: "nous-contacter", hash: "#form" },
  },
  {
    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 {
    navigateTo({ path: "nous-contacter", hash: "#details" });
  }
};

/**
 * 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 as string, query: { request: "demo" } });
      break;

    case ActionMenuItemType.CALL_US:
      callUs();
      break;

    case ActionMenuItemType.FOLLOW_LINK:
      if (!action.url) {
        throw new Error("Missing prop : url");
      }
      navigateTo(action.url);
      break;

    default:
      throw new Error("Unrecognized action");
  }
};
</script>

<style scoped lang="scss">
.sticky-menu {
  z-index: 100;
}

// Menu format lateral (pour affichage écrans larges)
.sticky-menu.lateral {
  position: fixed;
  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 !important;
  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);
  max-width: 100vw;

  .v-btn {
    margin: 6px 2%;
    width: 46%;
  }
}

.square {
  position: relative;
  width: 7rem;
  padding: 1rem;
  cursor: pointer;

  transition: transform 0.3s ease-in-out;
  box-shadow: -1px 2px 6px 1px var(--on-neutral-color-light);
}

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

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

  * {
    text-align: center;
  }
}

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