app/components/Layout/AlertBar.vue

<!--
Alert bars

Contient les différentes barres d'alertes qui s'affichent dans certains cas
-->

<template>
  <main>
    <v-expand-transition>
      <div v-if="showAlertBars">
        <LayoutAlertBarEnv style="z-index: 1010"/>

        <LayoutAlertBarSwitchUser style="z-index: 1009" />

        <client-only>
          <LayoutAlertBarCotisation
            v-if="organizationProfile.isCmf && ability.can('manage', 'cotisation')"
            style="z-index: 1008"
          />
        </client-only>

        <LayoutAlertBarSwitchYear style="z-index: 1007"/>
        <LayoutAlertBarSuperAdmin style="z-index: 1006"/>
        <LayoutAlertBarRegistrationStatus
          v-if="organizationProfile.hasModule('IEL')"
          style="z-index: 1005"
        />
      </div>
    </v-expand-transition>

    <div v-if="smAndDown">
      <div
        class="folded-bar theme-warning"
        style="z-index: 1004"
        @click="onFoldedWarningClick"
      >
        <v-icon small icon="fas fa-exclamation-triangle mx-1" />
        <span>{{ $t("show_warnings") }}</span>
        <v-icon small :icon="'fas mx-1' + (unfoldWarnings ? ' fa-chevron-up' : ' fa-chevron-down')" />
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { useOrganizationProfileStore } from '~/stores/organizationProfile'
import { useAbility } from '@casl/vue'
import {useDisplay} from 'vuetify';
import {StencilPreview} from 'vue-advanced-cropper';

const organizationProfile = useOrganizationProfileStore()
const ability = useAbility()
const { mdAndUp, smAndDown } = useDisplay()

const unfoldWarnings = ref(false)

const onFoldedWarningClick = () => {
  unfoldWarnings.value = !unfoldWarnings.value
}

const showAlertBars = computed(() => mdAndUp.value || unfoldWarnings.value)

</script>

<style scoped lang="scss">
.folded-bar {
  position: relative;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px;
  cursor: pointer;
}
</style>