app_vue2/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-menu offset-y left max-height="300">
    <template v-slot:activator="{ on: { click }, attrs }">
      <v-tooltip bottom>
        <template v-slot:activator="{ on: on_tooltips , attrs: attrs_tooltips }">
          <v-avatar
            v-if="avatar"
            size="30"
            v-bind="[attrs, attrs_tooltips]"
            v-on="on_tooltips"
            @click="click"
          >
            <img
              src="https://cdn.vuetifyjs.com/images/john.jpg"
              alt="John"
            >
          </v-avatar>

          <v-btn
            v-else
            icon
            v-bind="[attrs, attrs_tooltips]"
            color=""
            v-on="on_tooltips"
            @click="click"
          >
            <v-icon class="ot_white--text" small>
              {{ menu.icon }}
            </v-icon>
          </v-btn>
        </template>
        <span>{{ $t(menu.title) }}</span>
      </v-tooltip>
    </template>
    <v-list dense :subheader="true">
      <v-list-item dense class="ot_light_grey">
        <v-list-item-title v-text="$t(menu.title)" />
      </v-list-item>
      <template v-for="(item, index) in menu.children">
        <v-list-item
          :key="item.title"
          :href="item.isExternalLink ? item.to : undefined"
          :to="!item.isExternalLink ? item.to : undefined"
          router
          exact
        >
          <v-list-item-title v-text="$t(item.title)" />
        </v-list-item>
        <v-divider
          v-if="index < menu.length - 1"
          :key="index"
        />
      </template>
    </v-list>
  </v-menu>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    menu: {
      type: Object,
      required: true
    },
    avatar: {
      type: Boolean,
      required: false
    }
  }
})
</script>