app/components/Layout/AlertBar/SwitchUser.vue

<!--
Switch user

Barre qui s'affiche lorsque l'utilisateur possède un compte multi user
-->

<template>
  <UiSystemBar v-if="show" class="theme-info">
    <v-icon small icon="fas fa-info-circle" />
    <span>
      {{ $t('multi_account_alert_part1') }} <strong>{{ fullName }}</strong>
      {{ $t('multi_account_alert_part2') }}
    </span>

    <v-icon class="pl-1" small icon="fa fa-users" /> &nbsp;{{
      $t('multi_account_alert_part3')
    }}
  </UiSystemBar>
</template>

<script setup lang="ts">
import { useAccessProfileStore } from '~/stores/accessProfile'
import { useMenu } from '~/composables/layout/useMenu'

const accessProfile = useAccessProfileStore()
const { hasMenu } = useMenu()

const show = computed(() => hasMenu('MyFamily'))

const fullName = `${accessProfile.givenName} ${accessProfile.name}`
</script>

<style scoped lang="scss">
.v-system-bar {
  font-size: 14px;
}

.v-icon {
  height: 20px;
  margin: 0 6px;
}
</style>