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>

    <LayoutNotification></LayoutNotification>

    <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} from '@nuxtjs/composition-api'
  import {$useMenu} from "~/use/layout/menu";

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

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

      const displayedMiniVariant = computed(()=>store.state.profile.access.hasLateralMenu)
      const hasConfigurationMenu = computed(()=>store.state.profile.access.hasConfigurationMenu)
      const hasAccessesMenu = computed(()=>store.state.profile.access.hasAccessesMenu)
      const hasFamilyMenu = computed(()=>store.state.profile.access.hasFamilyMenu)
      const title = computed(()=>store.state.profile.organization.name)

      const webSiteMenu = $useMenu.setUpContext().useWebSiteMenuConstruct()
      const myAccessesMenu = $useMenu.setUpContext().useMyAccessesMenuConstruct()
      const myFamilyMenu = $useMenu.setUpContext().useMyFamilyMenuConstruct()
      const configurationMenu = $useMenu.setUpContext().useConfigurationMenuConstruct()
      const accountMenu = $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>