From ebcca466a940f67893e4ca3f123d2bb6a5591404 Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Thu, 26 Jun 2025 22:59:21 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ajout=20de=20la=20gestion=20de=20l'auto?=
 =?UTF-8?q?-hide=20du=20header=20et=20am=C3=A9lioration=20de=20la=20r?=
 =?UTF-8?q?=C3=A9activit=C3=A9=20des=20composants=20en=20fonction=20de=20l?=
 =?UTF-8?q?a=20taille=20de=20la=20fen=C3=AAtre,=20ainsi=20que=20des=20opti?=
 =?UTF-8?q?misations=20CSS=20pour=20une=20meilleure=20exp=C3=A9rience=20ut?=
 =?UTF-8?q?ilisateur=20sur=20mobile.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../infrastructure/api/apiMangaRepository.js  |  6 +-
 .../presentation/components/ChapterReader.vue | 14 +++-
 .../components/InfiniteReader.vue             | 63 +++++++++++++++-
 .../presentation/components/ReaderPage.vue    | 36 ++++++---
 .../components/SingleModeReader.vue           |  4 +
 .../reader/presentation/pages/ChapterPage.vue | 53 +++++++++++---
 .../app/shared/components/layout/Header.vue   | 26 ++++++-
 .../app/shared/components/layout/Layout.vue   | 25 +++++--
 .../app/shared/components/layout/Sidebar.vue  | 29 +++++---
 assets/vue/app/shared/stores/headerStore.js   | 73 +++++++++++++++++++
 10 files changed, 279 insertions(+), 50 deletions(-)
 create mode 100644 assets/vue/app/shared/stores/headerStore.js

diff --git a/assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js b/assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js
index 91738f9..fc74331 100644
--- a/assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js
+++ b/assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js
@@ -93,7 +93,7 @@ export class ApiMangaRepository {
 
     async searchMangaDex(query) {
         try {
-            const response = await fetch(`https://localhost/api/mangadex-search?title=${encodeURIComponent(query)}`);
+            const response = await fetch(`/api/mangadex-search?title=${encodeURIComponent(query)}`);
             if (!response.ok) {
                 throw new Error('Failed to search MangaDex');
             }
@@ -106,7 +106,7 @@ export class ApiMangaRepository {
 
     async createFromMangaDex(externalId) {
         try {
-            const response = await fetch('https://localhost/api/mangas/create-from-mangadex', {
+            const response = await fetch('/api/mangas/create-from-mangadex', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
@@ -125,7 +125,7 @@ export class ApiMangaRepository {
 
     async searchChapter(chapterId) {
         try {
-            const response = await fetch('https://localhost/api/scraping/chapters', {
+            const response = await fetch('/api/scraping/chapters', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
diff --git a/assets/vue/app/domain/reader/presentation/components/ChapterReader.vue b/assets/vue/app/domain/reader/presentation/components/ChapterReader.vue
index f7c7b6a..749c53b 100644
--- a/assets/vue/app/domain/reader/presentation/components/ChapterReader.vue
+++ b/assets/vue/app/domain/reader/presentation/components/ChapterReader.vue
@@ -44,6 +44,7 @@
 
 <script setup>
     import { onMounted, onUnmounted, watch } from 'vue';
+import { useHeaderStore } from '../../../../shared/stores/headerStore';
 import { useReaderStore } from '../../application/store/readerStore';
 import InfiniteReader from './InfiniteReader.vue';
 import ReaderControls from './ReaderControls.vue';
@@ -62,9 +63,16 @@ import SingleModeReader from './SingleModeReader.vue';
     });
 
     const store = useReaderStore();
+    const headerStore = useHeaderStore();
 
     const toggleReadingMode = () => {
-        store.setReadingMode(store.readingMode === 'single' ? 'infinite' : 'single');
+        const newMode = store.readingMode === 'single' ? 'infinite' : 'single';
+        store.setReadingMode(newMode);
+
+        // Désactiver l'auto-hide si on passe en mode single
+        if (newMode === 'single') {
+            headerStore.disableAutoHide();
+        }
     };
 
     const toggleReadingDirection = () => {
@@ -111,12 +119,15 @@ import SingleModeReader from './SingleModeReader.vue';
 
     onUnmounted(() => {
         window.removeEventListener('keydown', handleKeyPress);
+        // S'assurer que l'auto-hide est désactivé en quittant le lecteur
+        headerStore.disableAutoHide();
     });
 </script>
 
 <style lang="postcss" scoped>
     .chapter-reader {
         @apply w-full h-full flex flex-col items-center justify-center bg-gray-900 text-white;
+        @apply p-0 sm:p-2;
     }
 
     .loading {
@@ -129,6 +140,7 @@ import SingleModeReader from './SingleModeReader.vue';
 
     .reader-content {
         @apply w-full h-full flex flex-col;
+        @apply p-0 sm:p-2;
     }
 
     .rtl {
diff --git a/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue b/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue
index 5fdc48f..901115d 100644
--- a/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue
+++ b/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue
@@ -46,6 +46,7 @@
 
 <script setup>
     import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useHeaderStore } from '../../../../shared/stores/headerStore';
 import ChapterNavigation from './ChapterNavigation.vue';
 import ReaderPage from './ReaderPage.vue';
 
@@ -62,8 +63,10 @@ import ReaderPage from './ReaderPage.vue';
 
     const emit = defineEmits(['pageVisible']);
 
+    const headerStore = useHeaderStore();
     const containerRef = ref(null);
     const observer = ref(null);
+    const windowWidth = ref(window.innerWidth);
 
     // État pour le bouton scroll to top
     const showScrollToTop = ref(false);
@@ -102,7 +105,7 @@ import ReaderPage from './ReaderPage.vue';
         });
     };
 
-        // Gestion du scroll pour le bouton "revenir en haut"
+        // Gestion du scroll pour le bouton "revenir en haut" et le header
     const handleScroll = () => {
         let scrollTop = 0;
 
@@ -133,6 +136,11 @@ import ReaderPage from './ReaderPage.vue';
             scrollDirection = 'up';
         }
 
+        // Gestion du header auto-hide (seulement si largeur < 1200px)
+        if (windowWidth.value < 1200) {
+            headerStore.updateScrollDirection(scrollTop);
+        }
+
         // Mise à jour de la visibilité du bouton
         // Afficher si on scroll vers le bas et qu'on est à plus de 300px
         // Masquer si on scroll vers le haut ou qu'on est en haut de page
@@ -195,9 +203,27 @@ import ReaderPage from './ReaderPage.vue';
         { immediate: true }
     );
 
+    // Gestion du redimensionnement de la fenêtre
+    const handleResize = () => {
+        const newWidth = window.innerWidth;
+        windowWidth.value = newWidth;
+
+        // Activer/désactiver l'auto-hide selon la largeur
+        if (newWidth < 1200) {
+            headerStore.enableAutoHide();
+        } else {
+            headerStore.disableAutoHide();
+        }
+    };
+
     onMounted(() => {
         setupIntersectionObserver();
 
+        // Activer l'auto-hide du header si la largeur < 1200px
+        if (windowWidth.value < 1200) {
+            headerStore.enableAutoHide();
+        }
+
         // Ajouter l'écouteur de scroll sur le conteneur
         if (containerRef.value) {
             containerRef.value.addEventListener('scroll', handleScroll, { passive: true });
@@ -205,6 +231,9 @@ import ReaderPage from './ReaderPage.vue';
 
         // Ajouter l'écouteur de scroll sur la fenêtre
         window.addEventListener('scroll', handleScroll, { passive: true });
+
+        // Ajouter l'écouteur de redimensionnement
+        window.addEventListener('resize', handleResize, { passive: true });
     });
 
     onUnmounted(() => {
@@ -212,6 +241,9 @@ import ReaderPage from './ReaderPage.vue';
             observer.value.disconnect();
         }
 
+        // Désactiver l'auto-hide du header en quittant
+        headerStore.disableAutoHide();
+
         // Nettoyer l'écouteur de scroll du conteneur
         if (containerRef.value) {
             containerRef.value.removeEventListener('scroll', handleScroll);
@@ -219,23 +251,46 @@ import ReaderPage from './ReaderPage.vue';
 
         // Nettoyer l'écouteur de scroll de la fenêtre
         window.removeEventListener('scroll', handleScroll);
+
+        // Nettoyer l'écouteur de redimensionnement
+        window.removeEventListener('resize', handleResize);
     });
 </script>
 
 <style lang="postcss" scoped>
     .infinite-reader {
-        @apply flex-1 flex flex-col items-center overflow-y-auto py-8 relative;
+        @apply flex-1 flex flex-col items-center overflow-y-auto relative;
+        /* Réduction du padding sur mobile */
+        @apply py-2 sm:py-8;
         height: calc(100vh - 8rem);
         scroll-behavior: smooth;
     }
 
     .page-wrapper {
-        @apply w-full flex justify-center min-h-[200px] mb-4;
+        @apply w-full flex justify-center min-h-[200px];
+        /* Réduction des marges sur mobile */
+        @apply mb-2 sm:mb-4 px-1 sm:px-4;
     }
 
     .loading,
     .error {
-        @apply flex items-center justify-center w-[70vw] min-h-[400px];
+        @apply flex items-center justify-center min-h-[400px];
+        /* Largeur adaptative selon la taille d'écran */
+        width: 95vw; /* Mobile : 95% de la largeur */
+    }
+
+    @screen sm {
+        .loading,
+        .error {
+            width: 80vw; /* Tablette : 80% de la largeur */
+        }
+    }
+
+    @screen lg {
+        .loading,
+        .error {
+            width: 70vw; /* Desktop : 70% de la largeur */
+        }
     }
 
     .error {
diff --git a/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue b/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue
index 54101d8..d30e0f8 100644
--- a/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue
+++ b/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script setup>
-    import { computed, ref, onMounted } from 'vue';
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
 
     const props = defineProps({
         pageData: {
@@ -34,6 +34,7 @@
     const imageRef = ref(null);
     const naturalWidth = ref(0);
     const naturalHeight = ref(0);
+    const windowWidth = ref(window.innerWidth);
 
     const imageSource = computed(() => {
         if (!props.pageData?.base64Content || !props.pageData?.mimeType) {
@@ -49,19 +50,19 @@
         }
     };
 
-    // Calculer la largeur maximale en fonction de la hauteur de la fenêtre
+        // Calculer la largeur maximale en fonction de la largeur disponible
     const maxWidth = computed(() => {
         if (!naturalWidth.value || !naturalHeight.value) return null;
 
-        // On prend 70% de la largeur de la fenêtre comme largeur maximale
-        const maxWidthPx = window.innerWidth * 0.7;
+        const availableWidth = windowWidth.value;
 
-        // Si l'image est plus petite que la largeur maximale, on garde sa taille naturelle
-        if (naturalWidth.value <= maxWidthPx) {
-            return naturalWidth.value;
+        // Si la largeur disponible est < 1200px : utiliser 95% de la largeur
+        if (availableWidth < 1200) {
+            return Math.min(naturalWidth.value, availableWidth * 0.95);
         }
 
-        return maxWidthPx;
+        // Si la largeur disponible est >= 1200px : limiter à 1200px maximum
+        return Math.min(naturalWidth.value, 1200);
     });
 
     const imageStyle = computed(() => {
@@ -74,10 +75,20 @@
         };
     });
 
+    // Gestion du redimensionnement de la fenêtre
+    const handleResize = () => {
+        windowWidth.value = window.innerWidth;
+    };
+
     onMounted(() => {
         if (imageRef.value && imageRef.value.complete) {
             handleImageLoad();
         }
+        window.addEventListener('resize', handleResize);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', handleResize);
     });
 </script>
 
@@ -85,13 +96,20 @@
     .page-container {
         @apply flex-1 flex items-center justify-center overflow-hidden;
         transform-origin: center;
+        /* Réduction des marges sur mobile */
+        @apply p-0 sm:p-2;
     }
 
     .page-image {
-        @apply max-w-full max-h-full object-contain;
+        @apply object-contain;
+        /* La largeur est gérée par le JavaScript, on garde juste les contraintes max */
+        max-width: 100%;
+        max-height: 100%;
     }
 
     .error {
         @apply text-red-500 text-xl;
     }
 </style>
+
+
diff --git a/assets/vue/app/domain/reader/presentation/components/SingleModeReader.vue b/assets/vue/app/domain/reader/presentation/components/SingleModeReader.vue
index f6a51da..d607678 100644
--- a/assets/vue/app/domain/reader/presentation/components/SingleModeReader.vue
+++ b/assets/vue/app/domain/reader/presentation/components/SingleModeReader.vue
@@ -143,6 +143,8 @@ const hideRightHint = () => {
 <style lang="postcss" scoped>
 .single-mode-reader {
     @apply relative w-full h-full flex items-center justify-center;
+    /* Suppression des marges sur mobile */
+    @apply p-0 sm:p-2;
 }
 
 .page-navigation-wrapper {
@@ -152,6 +154,8 @@ const hideRightHint = () => {
 .page-content {
     @apply flex-1 h-full flex items-center justify-center;
     pointer-events: none; /* Empêche les clics sur l'image elle-même */
+    /* Optimisation pour mobile */
+    @apply p-0;
 }
 
 .navigation-zone {
diff --git a/assets/vue/app/domain/reader/presentation/pages/ChapterPage.vue b/assets/vue/app/domain/reader/presentation/pages/ChapterPage.vue
index 90d917d..d58db40 100644
--- a/assets/vue/app/domain/reader/presentation/pages/ChapterPage.vue
+++ b/assets/vue/app/domain/reader/presentation/pages/ChapterPage.vue
@@ -1,11 +1,28 @@
 <template>
     <div class="chapter-page">
         <div class="chapter-header">
-            <h1 class="text-2xl font-bold">
-                {{ currentChapter?.title || 'Chargement...' }}
-            </h1>
-            <div class="chapter-info">
-                <span class="text-gray-400"> Chapitre {{ currentChapter?.number }} </span>
+            <!-- Bouton de retour -->
+            <div class="flex items-center gap-4 mb-4">
+                <button
+                    @click="goBackToManga"
+                    class="flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-white transition-colors duration-200"
+                    :disabled="!currentChapter?.mangaId"
+                >
+                    <ArrowLeftIcon class="h-5 w-5" />
+                    <span class="text-sm font-medium">Retour au manga</span>
+                </button>
+            </div>
+
+            <!-- Titre du chapitre amélioré -->
+            <div class="chapter-title-section">
+                <h1 class="text-3xl md:text-4xl font-bold text-white leading-tight">
+                    {{ currentChapter?.title || 'Chargement...' }}
+                </h1>
+                <div class="chapter-meta mt-3">
+                    <span class="inline-flex items-center px-3 py-1 bg-blue-600 text-white text-sm font-semibold rounded-full">
+                        Chapitre {{ currentChapter?.number }}
+                    </span>
+                </div>
             </div>
         </div>
 
@@ -16,16 +33,24 @@
 </template>
 
 <script setup>
-    import { computed } from 'vue';
-    import { useRoute } from 'vue-router';
-    import { useReaderStore } from '../../application/store/readerStore';
-    import ChapterReader from '../components/ChapterReader.vue';
+    import { ArrowLeftIcon } from '@heroicons/vue/24/outline';
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useReaderStore } from '../../application/store/readerStore';
+import ChapterReader from '../components/ChapterReader.vue';
 
     const route = useRoute();
+    const router = useRouter();
     const store = useReaderStore();
 
     const chapterId = computed(() => route.params.chapterId);
     const currentChapter = computed(() => store.currentChapter);
+
+    const goBackToManga = () => {
+        if (currentChapter.value?.mangaId) {
+            router.push({ name: 'manga-details', params: { id: currentChapter.value.mangaId } });
+        }
+    };
 </script>
 
 <style lang="postcss" scoped>
@@ -34,11 +59,15 @@
     }
 
     .chapter-header {
-        @apply p-4 bg-gray-800 border-b border-gray-700;
+        @apply p-6 bg-gradient-to-b from-gray-800 to-gray-900 border-b border-gray-700 shadow-lg;
     }
 
-    .chapter-info {
-        @apply mt-2;
+    .chapter-title-section {
+        @apply space-y-2;
+    }
+
+    .chapter-meta {
+        @apply flex flex-wrap items-center gap-3;
     }
 
     .reader-container {
diff --git a/assets/vue/app/shared/components/layout/Header.vue b/assets/vue/app/shared/components/layout/Header.vue
index 0c343dc..f05ca54 100644
--- a/assets/vue/app/shared/components/layout/Header.vue
+++ b/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> 
\ No newline at end of file
+</script>
diff --git a/assets/vue/app/shared/components/layout/Layout.vue b/assets/vue/app/shared/components/layout/Layout.vue
index ed9378b..8d1cdd0 100644
--- a/assets/vue/app/shared/components/layout/Layout.vue
+++ b/assets/vue/app/shared/components/layout/Layout.vue
@@ -1,24 +1,39 @@
 <template>
     <div class="min-h-screen bg-gray-50 flex">
         <Header
+            :show-menu-button="isReaderMode"
             @menu-click="toggleSidebar"
             @manga-click="$emit('manga-click', $event)"
             @add-manga-click="$emit('add-manga-click', $event)" />
-        <Sidebar :is-open="isSidebarOpen" @close="closeSidebar" @add-manga-click="$emit('add-manga-click', $event)" />
+        <Sidebar
+            :is-open="isSidebarOpen"
+            :force-mobile-behavior="isReaderMode"
+            @close="closeSidebar"
+            @add-manga-click="$emit('add-manga-click', $event)" />
 
-        <main class="flex-1 pt-16 md:ml-60">
+        <main :class="[
+            'flex-1 pt-16',
+            isReaderMode ? '' : 'md:ml-60'
+        ]">
             <RouterView></RouterView>
         </main>
     </div>
 </template>
 
 <script setup>
-    import { ref } from 'vue';
-    import Header from './Header.vue';
-    import Sidebar from './Sidebar.vue';
+    import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import Header from './Header.vue';
+import Sidebar from './Sidebar.vue';
 
+    const route = useRoute();
     const isSidebarOpen = ref(false);
 
+    // Détecte si on est en mode Reader
+    const isReaderMode = computed(() => {
+        return route.name === 'reader';
+    });
+
     const toggleSidebar = () => {
         isSidebarOpen.value = !isSidebarOpen.value;
     };
diff --git a/assets/vue/app/shared/components/layout/Sidebar.vue b/assets/vue/app/shared/components/layout/Sidebar.vue
index 67a1360..50ab6cb 100644
--- a/assets/vue/app/shared/components/layout/Sidebar.vue
+++ b/assets/vue/app/shared/components/layout/Sidebar.vue
@@ -2,7 +2,8 @@
     <aside
         :class="[
             'fixed top-16 left-0 w-60 bg-gray-600 text-white transform transition-transform duration-300 ease-in-out z-40 h-full',
-            isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
+            isOpen ? 'translate-x-0' : '-translate-x-full',
+            !forceMobileBehavior ? 'md:translate-x-0' : ''
         ]"
         role="navigation"
         aria-label="Menu principal">
@@ -23,22 +24,26 @@
 
 <script setup>
     import {
-        BookOpenIcon,
-        PlusIcon,
-        ArrowDownTrayIcon,
-        GlobeAltIcon,
-        ArrowsRightLeftIcon,
-        CalendarIcon,
-        ClockIcon,
-        Cog6ToothIcon,
-        ComputerDesktopIcon
-    } from '@heroicons/vue/24/solid';
-    import MenuGroup from './sidebar/MenuGroup.vue';
+    ArrowDownTrayIcon,
+    ArrowsRightLeftIcon,
+    BookOpenIcon,
+    CalendarIcon,
+    ClockIcon,
+    Cog6ToothIcon,
+    ComputerDesktopIcon,
+    GlobeAltIcon,
+    PlusIcon
+} from '@heroicons/vue/24/solid';
+import MenuGroup from './sidebar/MenuGroup.vue';
 
     const props = defineProps({
         isOpen: {
             type: Boolean,
             required: true
+        },
+        forceMobileBehavior: {
+            type: Boolean,
+            default: false
         }
     });
 
diff --git a/assets/vue/app/shared/stores/headerStore.js b/assets/vue/app/shared/stores/headerStore.js
new file mode 100644
index 0000000..aedc1aa
--- /dev/null
+++ b/assets/vue/app/shared/stores/headerStore.js
@@ -0,0 +1,73 @@
+import { defineStore } from 'pinia';
+
+export const useHeaderStore = defineStore('header', {
+    state: () => ({
+        isHeaderVisible: true,
+        isAutoHideEnabled: false,
+        lastScrollY: 0,
+        scrollDirection: 'up'
+    }),
+
+    getters: {
+        shouldShowHeader: (state) => {
+            // Si l'auto-hide n'est pas activé, toujours afficher le header
+            if (!state.isAutoHideEnabled) {
+                return true;
+            }
+
+            // Si l'auto-hide est activé, suivre la visibilité
+            return state.isHeaderVisible;
+        }
+    },
+
+    actions: {
+        enableAutoHide() {
+            this.isAutoHideEnabled = true;
+        },
+
+        disableAutoHide() {
+            this.isAutoHideEnabled = false;
+            this.isHeaderVisible = true; // Toujours visible quand désactivé
+        },
+
+                updateScrollDirection(scrollY) {
+            // Éviter les calculs inutiles si pas d'auto-hide
+            if (!this.isAutoHideEnabled) {
+                this.lastScrollY = scrollY;
+                return;
+            }
+
+            // Détecter la direction du scroll avec un seuil pour éviter les micro-mouvements
+            const scrollDifference = Math.abs(scrollY - this.lastScrollY);
+
+            if (scrollDifference < 5) {
+                // Mouvement trop petit, on ignore
+                return;
+            }
+
+            if (scrollY > this.lastScrollY && scrollY > 100) {
+                // Scroll vers le bas et suffisamment de scroll
+                if (this.scrollDirection !== 'down') {
+                    this.scrollDirection = 'down';
+                    this.isHeaderVisible = false;
+                }
+            } else if (scrollY < this.lastScrollY) {
+                // Scroll vers le haut
+                if (this.scrollDirection !== 'up') {
+                    this.scrollDirection = 'up';
+                    this.isHeaderVisible = true;
+                }
+            }
+
+            this.lastScrollY = scrollY;
+        },
+
+        showHeader() {
+            this.isHeaderVisible = true;
+        },
+
+        hideHeader() {
+            this.isHeaderVisible = false;
+        }
+    }
+});