app_vue2/components/Layout/Header.vue

<template>
  <v-app-bar
    clipped-left
    elevate-on-scroll
    dense
    fixed
    app
    class="ot_green ot_white--text"
  >
    <v-btn
      v-if="displayedMiniVariant"
      class="menu-btn"
      icon
      @click.stop="displayedMenu()"
    >
      <v-icon class="ot_white--text">mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}</v-icon>
    </v-btn>

    <v-toolbar-title v-text="title"/>

    <v-spacer/>

    <v-btn
      elevation="2"
      color="ot_warning ot_white--text"
    >{{ $t('create') }}</v-btn>

    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          icon
          v-bind="attrs"
          v-on="on"
        >
          <a class="no-decoration" :href="properties.homeUrl + '/'"><v-icon class="ot_white--text" small>fa-home</v-icon></a>
        </v-btn>
      </template>
      <span>{{ $t('welcome') }}</span>
    </v-tooltip>


    <LayoutHeaderMenu :menu="webSiteMenu"></LayoutHeaderMenu>

    <LayoutHeaderMenu :menu="myAccessesMenu" v-if="hasAccessesMenu"></LayoutHeaderMenu>

    <LayoutHeaderMenu :menu="myFamilyMenu" v-if="hasFamilyMenu"></LayoutHeaderMenu>

    <LayoutHeaderNotification></LayoutHeaderNotification>

    <LayoutHeaderMenu :menu="configurationMenu" v-if="hasConfigurationMenu"></LayoutHeaderMenu>

    <LayoutHeaderMenu :menu="accountMenu" :avatar="true"></LayoutHeaderMenu>

    <a class="text-body pa-3 ml-2 ot_dark_grey ot_white--text text-decoration-none" href="https://support.opentalent.fr/" target="_blank">
      <span class="d-none d-sm-none d-md-flex">{{ $t('help_access') }}</span>
      <v-icon class="d-sm-flex d-md-none" color="white">fas fa-question-circle</v-icon>
    </a>

  </v-app-bar>
</template>

<script lang="ts">
import {defineComponent, reactive, useContext, computed, ComputedRef, Ref} from '@nuxtjs/composition-api'
import {$useMenu} from "~/use/layout/menu";
import {UnwrapRef} from "@vue/composition-api";
import {AnyJson} from "~/types/interfaces";

export default defineComponent({
  setup(props, {emit}) {
    const {store, $config} = useContext();

    const properties:UnwrapRef<AnyJson> = reactive({
      miniVariant: false,
      homeUrl : $config.baseURL_adminLegacy
    })

    const displayedMiniVariant:ComputedRef<boolean> = computed(()=>store.state.profile.access.hasLateralMenu)
    const hasConfigurationMenu:ComputedRef<boolean>  = computed(()=>store.state.profile.access.hasConfigurationMenu)
    const hasAccessesMenu:ComputedRef<boolean>  = computed(()=>store.state.profile.access.hasAccessesMenu)
    const hasFamilyMenu:ComputedRef<boolean>  = computed(()=>store.state.profile.access.hasFamilyMenu)
    const title:ComputedRef<string>  = computed(()=>store.state.profile.organization.name)

    const webSiteMenu:Ref<any> = $useMenu.setUpContext().useWebSiteMenuConstruct()
    const myAccessesMenu:Ref<any> = $useMenu.setUpContext().useMyAccessesMenuConstruct()
    const myFamilyMenu:Ref<any> = $useMenu.setUpContext().useMyFamilyMenuConstruct()
    const configurationMenu:Ref<any> = $useMenu.setUpContext().useConfigurationMenuConstruct()
    const accountMenu:Ref<any> = $useMenu.setUpContext().useAccountMenuConstruct()

    const displayedMenu = () => {
      properties.miniVariant = !properties.miniVariant
      emit('handle-open-menu-click', properties.miniVariant)
    }

    return {
      properties,
      displayedMiniVariant,
      hasConfigurationMenu,
      hasAccessesMenu,
      hasFamilyMenu,
      title,
      displayedMenu,
      webSiteMenu,
      myAccessesMenu,
      myFamilyMenu,
      configurationMenu,
      accountMenu
    }
  }
})
</script>

<style scoped>
  .help {
    padding: 14px;
    padding-bottom: 13px;
    font-size: 14px;
    text-decoration: none;
  }
</style>