feat: ajout de la gestion de l'auto-hide du header et amélioration de la réactivité des composants en fonction de la taille de la fenêtre, ainsi que des optimisations CSS pour une meilleure expérience utilisateur sur mobile.

assets/vue/app/shared/components/layout/Header.vue

@@ -1,8 +1,16 @@
 <template>
-  <header class="bg-green-600 h-16 flex items-center fixed w-full z-50">
-    <button 
+  <header
+    :class="[
+      'bg-green-600 h-16 flex items-center fixed w-full z-50 transition-transform duration-300 ease-in-out',
+      headerStore.shouldShowHeader ? 'translate-y-0' : '-translate-y-full'
+    ]"
+  >
+    <button
       @click="$emit('menu-click')"
-      class="ml-4 text-white p-2 md:hidden"
+      :class="[
+        'ml-4 text-white p-2',
+        showMenuButton ? '' : 'md:hidden'
+      ]"
     >
       <Bars3Icon class="h-6 w-6" />
     </button>
@@ -17,7 +25,17 @@
 
 <script setup>
 import { Bars3Icon } from '@heroicons/vue/24/outline';
+import { useHeaderStore } from '../../stores/headerStore';
 import SearchBar from './SearchBar.vue';
 
+const headerStore = useHeaderStore();
+
+defineProps({
+  showMenuButton: {
+    type: Boolean,
+    default: false
+  }
+});
+
 defineEmits(['menu-click']);
-</script> 
+</script>