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 width="48px" 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"></UiImage>
      </v-avatar>
      <v-icon v-else class="text-ot-white">
        {{ menu.icon.name }}
      </v-icon>
    </v-btn>

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

    <v-menu
        :activator="btn"
        :model-value="isOpened()"
        location="start"
        @update:modelValue="onStateUpdated"
    >
      <v-card>
        <v-card-title class="ot-header-menu 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"></UiImage>
                      </v-avatar>
                      <v-icon v-else class="text-ot-white" size="small">
                        {{ child.icon.name }}
                      </v-icon>
                    </span>

                  <span>{{$t(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 actions">
          <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
  }
})

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

const menu = buildMenu(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">
  .actions {
    background: rgb(var(--v-theme-ot-green));
    color: white;
  }
</style>