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="theme-primary"
  >
    <template #prepend>
      <v-app-bar-nav-icon
          v-if="hasMainMenu && layoutStore.name !== 'parameters'"
          :icon="isMainMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
          @click="toggleMainMenu"
      />
      <div v-else-if="hasParametersMenu && layoutStore.name === 'parameters'">
        <v-app-bar-nav-icon
          v-if="mdAndUp"
          icon="fa fa-gear"
        />
        <v-app-bar-nav-icon
          v-else
          :icon="isParametersMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
          @click="toggleParametersMenu"
        />
      </div>
    </template>

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

    <LayoutThemeSwitcher v-if="false" /> <!-- En attente validation PO -->

    <LayoutHeaderUniversalCreationCreateButton v-if="showUniversalButton" class="mr-3" />

    <LayoutHeaderHomeBtn v-if="smAndUp" />

    <LayoutHeaderMenu name="WebsiteList" :translate-label="false" />

    <LayoutHeaderMenu name="MyAccesses" />

    <LayoutHeaderMenu name="MyFamily" :translate-label="false" />

    <LayoutHeaderNotification />

    <LayoutHeaderMenu name="Configuration" />

    <LayoutHeaderMenu name="Account" color="on-primary" icon="fas fa-sun" />

    <a
        :href="runtimeConfig.supportUrl"
        class="text-body px-3 py-4 ml-2 theme-secondary text-decoration-none"
        target="_blank"
    >
      <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="on-secondary" />
    </a>
  </v-app-bar>
</template>

<script setup lang="ts">

import {computed} from "@vue/reactivity";
import type {ComputedRef} from "@vue/reactivity";
import {useMenu} from "~/composables/layout/useMenu";
import {useAbility} from "@casl/vue";
import {useDisplay} from 'vuetify'
import {useOrganizationProfileStore} from "~/stores/organizationProfile";
import {useLayoutStore} from "~/stores/layout";

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

const { hasMenu, isMenuOpened, toggleMenu } = useMenu()

const { smAndUp, mdAndUp } = useDisplay()

const hasMainMenu = computed(() => hasMenu('Main'))
const isMainMenuOpened = computed(() => isMenuOpened('Main'))
const toggleMainMenu = () => toggleMenu('Main')

const hasParametersMenu = computed(() => hasMenu('Parameters'))
const isParametersMenuOpened = computed(() => isMenuOpened('Parameters'))
const toggleParametersMenu = () => toggleMenu('Parameters')

const ability = useAbility()
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')

const layoutStore = useLayoutStore()

</script>

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