app_vue2/components/Layout/Header.vue

<!--
Header de l'application, contient entre autres le nom de l'organisation, l'accès à l'aide
et aux préférences de l'utilisateur
-->

<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 d-none d-sm-none d-md-flex" icon @click.stop="displayedMiniMenu()"
    >
      <v-icon class="ot_white--text">
        mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}
      </v-icon>
    </v-btn>

    <v-btn class="menu-btn d-sm-flex d-md-none" icon @click.stop="displayedMenu()">
      <v-icon class="ot_white--text">
        mdi-menu
      </v-icon>
    </v-btn>

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

    <v-spacer />

    <LayoutHeaderUniversalCreationCreateButton v-if="showUniversalButton" />

    <v-tooltip bottom>
      <template #activator="{ on, attrs }">
        <v-btn
          icon
          class="ml-2"
          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 v-if="hasAccessesMenu" :menu="myAccessesMenu" />

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

    <LayoutHeaderNotification />

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

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

    <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, UnwrapRef
} from '@nuxtjs/composition-api'
import { $useMenu } from '~/composables/layout/menu'
import { AnyJson } from '~/types/interfaces'

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

    const properties:UnwrapRef<AnyJson> = reactive({
      miniVariant: false,
      openMenu: 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 displayedMiniMenu = () => {
      properties.miniVariant = !properties.miniVariant
      emit('handle-open-mini-menu-click', properties.miniVariant)
    }

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

    const showUniversalButton =
        $ability.can('manage', 'users')
      || $ability.can('manage', 'courses')
      || $ability.can('manage', 'examens')
      || $ability.can('manage', 'educationalprojects')
      || $ability.can('manage', 'events')
      || $ability.can('manage', 'emails')
      || $ability.can('manage', 'mails')
      || $ability.can('manage', 'texto')
      || $ability.can('display', 'message_send_page')
      || $ability.can('manage', 'equipments') ;

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

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