app_vue2/components/Layout/Header/Menu.vue

<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"
                 v-on: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]"
                 v-on="on_tooltips"
                 v-on:click="click"
                 color=""
          >
            <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-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-title>
        </v-list-item>
        <v-divider
          v-if="index < menu.length - 1"
          :key="index"
        ></v-divider>
      </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>