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="properties.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="properties.title"/>

    <v-spacer/>

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

<!--    <v-btn icon>-->
<!--      <a class="no-decoration" :href="properties.homeUrl + '/'"><v-icon class="ot_white&#45;&#45;text" small>fa-home</v-icon></a>-->
<!--    </v-btn>-->

    <v-btn icon>
      <NuxtLink to="/" class="no-decoration"><v-icon class="ot_white--text" small>fa-home</v-icon></NuxtLink>
    </v-btn>

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

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

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

    <LayoutNotification></LayoutNotification>

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

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

    <a class="help ot_dark_grey ot_menu_color--text" href="https://support.opentalent.fr/" target="_blank">{{$t('help_access')}}</a>

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

<script lang="ts">
  import {defineComponent, reactive, useContext} 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,
        displayedMiniVariant: store.state.profile.access.hasLateralMenu,
        hasConfigurationMenu: store.state.profile.access.hasConfigurationMenu,
        hasAccessesMenu: store.state.profile.access.hasAccessesMenu,
        hasFamilyMenu: store.state.profile.access.hasFamilyMenu,
        title: store.state.profile.organization.name,
        homeUrl : $config.baseURL_adminLegacy,
        webSiteMenu: $useMenu.setUpContext().useWebSiteMenuConstruct(),
        myAccessesMenu : $useMenu.setUpContext().useMyAccessesMenuConstruct(),
        myFamilyMenu : $useMenu.setUpContext().useMyFamilyMenuConstruct(),
        configurationMenu: $useMenu.setUpContext().useConfigurationMenuConstruct(),
        accountMenu : $useMenu.setUpContext().useAccountMenuConstruct()
      })

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

      return {
        properties,
        displayedMenu
      }
    }
  })
</script>

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