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>
  <v-tooltip
      v-if="displayMenu"
      :text="$t(menu.label)"
      location="bottom"
  >
    <template #activator="{ props }">
      <v-btn v-bind="props" icon width="48px">
        <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" small>
          {{ menu.icon.name }}
        </v-icon>

        <v-menu
            :model-value="isOpened()"
            activator="parent"
            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" 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>
      </v-btn>
    </template>
  </v-tooltip>

</template>

<script setup lang="ts">
import {useMenu} from "~/composables/layout/useMenu";
import {computed} 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)
}

</script>

<style scoped lang="scss">
  .actions {
    background: rgb(var(--v-theme-ot-green));
    color: white;
  }
</style>