app/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
      order="0"
      density="compact"
      class="bg-ot-green text-ot-white"
  >
    <template #prepend>
      <v-app-bar-nav-icon
          v-if="hasMenu('Main')"
          :icon="isMenuOpened('Main') ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
          class="text-ot-white"
          @click="toggleMenu('Main')"
      >
      </v-app-bar-nav-icon>

      <!--        :icon="isMenuOpened('Main') ? 'fas fa-angle-left' : 'fas fa-bars'"-->
    </template>

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

    <v-spacer />

<!--    <LayoutHeaderUniversalCreationCreateButton v-if="showUniversalButton" />-->

    <v-tooltip text="$t('welcome')" bottom>
      <v-btn
        icon="far fa-home"
        :href="homeUrl"
        class="ml-2 text-ot-white"
      ></v-btn>
    </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"/>-->

    <a
        href="https://support.opentalent.fr/"
        class="text-body pa-3 ml-2 ot-dark-grey text-ot-white text-decoration-none"
        target="_blank"
    >
      <!-- TODO: mettre le lien vers le support dans les .env ou dans la conf -->
      <span class="d-none d-sm-none d-md-flex">{{ $t('help_access') }}</span>
      <v-icon icon="fas fa-question-circle" class="d-sm-flex d-md-none" color="white"></v-icon>
    </a>
  </v-app-bar>
</template>

<script setup lang="ts">

import {computed, ComputedRef, Ref} from "@vue/reactivity";
import {useMenuBuilder} from "~/composables/layout/useMenuBuilder";
import {useAbility} from "@casl/vue";
import {usePageStore} from "~/store/page";
import {useOrganizationProfileStore} from "~/store/profile/organization";
import {useRuntimeConfig} from "#app";

const organizationProfile = useOrganizationProfileStore()

const title: ComputedRef<string> = computed(() => organizationProfile.name ?? 'Opentalent')

const { buildAccountMenu, buildWebsiteListMenu, buildMyFamilyMenu, buildConfigurationMenu, buildMyAccessesMenu, hasMenu } = useMenuBuilder()

const webSiteMenu: Ref<any> = buildWebsiteListMenu()
const myAccessesMenu: Ref<any> = buildMyAccessesMenu()
const myFamilyMenu: Ref<any> = buildMyFamilyMenu()
const configurationMenu: Ref<any> = buildConfigurationMenu()
const accountMenu: Ref<any> = buildAccountMenu()

const pageState = usePageStore()

const isMenuOpened = (name: string): boolean => {
  return pageState.menusOpened[name]
}

const toggleMenu = (name: string) => {
  console.log('toggle menu ' + name)
  pageState.menusOpened[name] = !pageState.menusOpened[name]
}


const runtimeConfig = useRuntimeConfig()
const homeUrl = runtimeConfig.baseUrlAdminLegacy

const { can } = useAbility()

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

</script>

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