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>
  <div v-show="showMenu">
    <!-- É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 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)"
      >
        <span v-if="mdAndUp">{{ action.text }}</span>
        <v-icon v-else :aria-label="action.text">{{ action.icon }}</v-icon>
      </v-btn>
    </div>

    <v-btn
      v-if="isVisible"
      :to="{ path: '', hash: '#top' }"
      aria-label="Revenir en début de page"
      class="back-to-the-top secondary"
    >
      <v-icon>fas fa-arrow-up</v-icon>
    </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, mdAndUp } = 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
)

// Attend l'hydratation avant d'afficher
const showMenu = ref(false)
onNuxtReady(() => {
  showMenu.value = true
})

// 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, {
        open: { target: '_blank' },
      })
      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;
  padding: 0 6px;

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

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

.back-to-the-top {
  position: fixed;
  right: 12px;
  bottom: 58px;
  z-index: 100;
  height: 48px;
  width: 48px;
  border-radius: 32px;
}

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