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="hasLateralMenu"
        :icon="isLateralMenuOpened ? 'mdi:mdi-menu-open' : 'mdi:mdi-menu'"
        @click="toggleLateralMenu"
      />
    </template>

    <v-toolbar-title v-if="smAndUp">
      <LayoutHeaderTitle>
        {{ title }}
      </LayoutHeaderTitle>
    </v-toolbar-title>

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

    <LayoutHeaderUniversalCreationCreateButton
      v-if="showUniversalButton"
      :class="smAndUp ? '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 || runtimeConfig.public.supportUrl"
      class="help theme-secondary"
      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'
import type { ComputedRef } from 'vue'
import { useAbility } from '@casl/vue'
import { useDisplay } from 'vuetify'
import { useMenu } from '~/composables/layout/useMenu'
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 } = useDisplay()

const hasLateralMenu = computed(() => {
  return (
    (layoutStore.name !== 'parameters' && hasMenu('Main')) ||
    (layoutStore.name === 'parameters' && hasMenu('Parameters'))
  )
})

const isLateralMenuOpened = computed(() => {
  return (
    (layoutStore.name !== 'parameters' && isMenuOpened('Main')) ||
    (layoutStore.name === 'parameters' && isMenuOpened('Parameters'))
  )
})

const toggleLateralMenu = () => {
  if (layoutStore.name === 'parameters') {
    toggleMenu('Parameters')
  } else {
    toggleMenu('Main')
  }
}

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>
:deep(.v-toolbar__content > .v-toolbar-title) {
  margin-left: 2px;

  .v-img {
    background-color: rgb(var(--v-theme-on-primary));
    border-radius: 18px;
  }
}

.help {
  padding: 12px 16px;
  margin-left: 4px;
  font-size: 14px;
  text-decoration: none;
  height: 100%;
}
</style>