app/components/Layout/Header/Menu.vue

<!--
Menu déroulant générique pour l'affichage des menus du
header principal (configuration, paramètres du compte...)
-->

<template>
  <div v-if="displayMenu">

    <v-btn
        ref="btn"
        icon
        size="small"
    >
      <v-avatar
          v-if="menu.icon.avatarId || menu.icon.avatarByDefault"
          size="30"
      >
        <UiImage
            :id="menu.icon.avatarId"
            :defaultImage="menu.icon.avatarByDefault"
            :width="30"
        />
      </v-avatar>

      <v-icon
          v-else
          :icon="menu.icon.name"
          class="on-primary"
      />
    </v-btn>

    <v-tooltip
        :activator="btn"
        :text="$t(menu.label)"
        location="bottom"
    />

    <v-menu
        :activator="btn"
        :model-value="isOpened()"
        @update:modelValue="onStateUpdated"
    >
      <v-card>
        <v-card-title class="theme-neutral text-body-2 font-weight-bold">
          {{$t(menu.label)}}
        </v-card-title>

        <v-card-text class="ma-0 pa-0 header-menu">
          <v-list density="compact" :subheader="true">
            <template v-for="(child, index) in menu.children" :key="index">
              <v-list-item
                  :id="child.label"
                  :href="!isInternalLink(child) ? child.to : undefined"
                  :to="isInternalLink(child) ? child.to : undefined"
              >
                <v-list-item-title>
                    <span v-if="child.icon">
                      <v-avatar v-if="menu.icon.avatarId || child.icon.avatarByDefault" size="30">
                        <UiImage :id="child.icon.avatarId" :defaultImage="child.icon.avatarByDefault" :width="30" />
                      </v-avatar>
                      <v-icon v-else class="on-primary" size="small">
                        {{ child.icon.name }}
                      </v-icon>
                    </span>

                  <span>{{ translateLabel ? $t(child.label) : child.label }}</span>
                </v-list-item-title>
              </v-list-item>

            </template>
          </v-list>
        </v-card-text>

        <v-card-actions v-if="menu.actions.length > 0" class="ma-0 pa-0 theme-primary">
          <template v-for="(action, index) in menu.actions" :key="index">
            <v-list-item
                :id="action.label"
                :href="!isInternalLink(action) ? action.to : undefined"
                :to="isInternalLink(action) ? action.to : undefined"
            >
              <v-list-item-title class="text-body-2" v-text="$t(action.label)"/>
            </v-list-item>
          </template>
        </v-card-actions>
      </v-card>
    </v-menu>
  </div>
</template>

<script setup lang="ts">
import {useMenu} from "~/composables/layout/useMenu";
import {computed, ref} from "@vue/reactivity";

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  translateLabel: {
    type: Boolean,
    required: false,
    default: true
  }
})

const { getMenu, isInternalLink, hasMenu, setMenuState, isMenuOpened } = useMenu()

const menu = getMenu(props.name)
const displayMenu = computed(() => hasMenu(props.name))
const isOpened = () => isMenuOpened(props.name)

const onStateUpdated = (e: any) => {
  setMenuState(props.name, e)
}

const btn = ref(null)

</script>

<style scoped lang="scss">
  .v-list {
    padding: 0;
  }

  .header-menu .v-list .v-list-item:last-child {
    border-bottom: none;
  }
</style>