- Mise en place de la barre d'informations

src/App.vue

@@ -3,6 +3,9 @@
     <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
     <Navbar :drawer="drawer" @close="drawer = false"/>
     <v-main>
+      <div class="info-stack">
+        <Infobar v-if="showInfoBar" :message="infoBarMessage" />
+      </div>
       <div class="error-stack">
         <v-alert
           v-for="(error, index) in errorStack"
@@ -32,20 +35,22 @@
 </template>
 
 <script setup>
-import {onBeforeMount, onMounted, ref} from 'vue';
+import {onMounted, ref} from 'vue';
 import Header from '@/components/Structure/Header.vue'
 import Navbar from '@/components/Structure/Navbar.vue'
 import Footer from '@/components/Structure/Footer.vue'
+import Infobar from '@/components/Structure/Infobar.vue'
 import router from '@/router/index'
 import {HttpStatusCode} from 'axios'
 import {useTheme} from "vuetify";
 
 const errorStack = ref([])
 const drawer = ref(false)
-
-
 const theme = useTheme()
 
+const showInfoBar = ref(true)
+const infoBarMessage = ref('Bienvenue sur notre application !')
+
 onMounted(() => {
   theme.global.name.value = localStorage.getItem('theme')
 })
@@ -127,6 +132,15 @@ function toggleDrawer() {
   padding: 10px;
 }
 
+.info-stack {
+  position: fixed;
+  top: 64px; /* Ajustez cette valeur en fonction de la hauteur de votre barre de navigation */
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding: 10px;
+}
+
 .custom-alert {
   background-color: #FFEBEE !important; /* Fond rouge clair */
   color: #B71C1C !important; /* Texte rouge foncé */

src/components/Structure/Infobar.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-alert
+    color="debug"
+    icon="mdi-information"
+    :title="title"
+    variant="flat"
+    border="start"
+    class="mb-2 custom-infobar"
+  >
+    {{ message }}
+  </v-alert>
+</template>
+
+<script setup>
+import {defineProps, defineEmits} from 'vue';
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: 'Information importante'
+  },
+  title: {
+    type: String,
+    default: 'Information importante aux utilisateurs'
+  }
+});
+</script>