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: 510" />

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

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

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

    <div v-if="smAndDown">
      <div
        class="folded-bar theme-warning"
        style="z-index: 504"
        @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 { useAbility } from '@casl/vue'
import { useDisplay } from 'vuetify'
import { StencilPreview } from 'vue-advanced-cropper'
import { useOrganizationProfileStore } from '~/stores/organizationProfile'

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>