From 79397e452ee6106748b9d1739ee887a27c1fdd95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Wed, 9 Apr 2025 16:17:12 +0400
Subject: [PATCH] refactor: include mobile menu

---
 includes/mobile-menu.php | 79 ++++++++++++++++++++++------------------
 index.php                | 52 +-------------------------
 video.php                | 45 +----------------------
 3 files changed, 46 insertions(+), 130 deletions(-)

diff --git a/includes/mobile-menu.php b/includes/mobile-menu.php
index 0df008c..f911d3f 100644
--- a/includes/mobile-menu.php
+++ b/includes/mobile-menu.php
@@ -1,42 +1,49 @@
+<!-- Menu mobile (masqué par défaut) -->
 <div class="mobile-menu">
-    <div class="mobile-menu-header">
-        <div class="logo">
-            <a href="index.php">
-                <img src="img/logo.png" alt="Kaubuntu.re">
-            </a>
-        </div>
-        <button class="mobile-menu-close">
-            <i class="fas fa-times"></i>
-        </button>
+    <button class="mobile-menu-close">
+        <i class="fas fa-times"></i>
+    </button>
+    
+    <div class="search-container">
+        <form action="search.php" method="get">
+            <input type="text" name="q" placeholder="Recherche">
+            <button type="submit"><i class="fas fa-search"></i></button>
+        </form>
     </div>
     
-    <nav class="mobile-menu-nav">
-        <ul>
-            <li><a href="index.php"><i class="fas fa-home"></i> Accueil</a></li>
-            <li><a href="categories.php"><i class="fas fa-th-large"></i> Catégories</a></li>
-            <li><a href="channels.php"><i class="fas fa-users"></i> Chaînes</a></li>
-            <li><a href="about.php"><i class="fas fa-info-circle"></i> À propos</a></li>
-            <li><a href="contact.php"><i class="fas fa-envelope"></i> Contact</a></li>
-        </ul>
-    </nav>
+    <a href="index.php" class="nav-item">
+        <i class="fas fa-home"></i> Accueil
+    </a>
+    <a href="#" class="nav-item">
+        <i class="fas fa-broadcast-tower"></i> Direct
+    </a>
     
-    <div class="mobile-menu-section">
-        <h3>Catégories populaires</h3>
-        <ul>
-            <li><a href="categories.php?id=1">Technologie</a></li>
-            <li><a href="categories.php?id=2">Culture</a></li>
-            <li><a href="categories.php?id=3">Éducation</a></li>
-            <li><a href="categories.php?id=4">Divertissement</a></li>
-        </ul>
-    </div>
+    <div class="nav-divider"></div>
     
-    <div class="mobile-menu-section">
-        <h3>Suivez-nous</h3>
-        <div class="social-icons">
-            <a href="#"><i class="fab fa-facebook"></i></a>
-            <a href="#"><i class="fab fa-twitter"></i></a>
-            <a href="#"><i class="fab fa-instagram"></i></a>
-            <a href="#"><i class="fab fa-youtube"></i></a>
-        </div>
+    <a href="#" class="nav-item">
+        <i class="fas fa-compass"></i> Explorer
+    </a>
+    <a href="#" class="nav-item">
+        <i class="fas fa-globe"></i> Actualité
+    </a>
+    <a href="#" class="nav-item">
+        <i class="fas fa-music"></i> Musique
+    </a>
+    <a href="#" class="nav-item">
+        <i class="fas fa-monument"></i> Histoire
+    </a>
+    <a href="#" class="nav-item">
+        <i class="fas fa-running"></i> Sport
+    </a>
+    
+    <div class="nav-divider"></div>
+    
+    <h3 class="mobile-section-title">Suivez-nous</h3>
+    <div class="mobile-social-icons">
+        <a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>"><i class="fab fa-facebook icon-facebook"></i></a>
+        <a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>"><i class="fab fa-instagram icon-instagram"></i></a>
+        <a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>"><i class="fab fa-tiktok icon-tiktok"></i></a>
+        <a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>"><i class="fab fa-youtube icon-youtube"></i></a>
+        <a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>"><i class="fab fa-x-twitter icon-x"></i></a>
     </div>
-</div> 
\ No newline at end of file
+</div>
diff --git a/index.php b/index.php
index 0743b02..e3ff72c 100644
--- a/index.php
+++ b/index.php
@@ -282,57 +282,7 @@
         </div>
         <?php include 'includes/footer.php'; ?>
     </div>
-    
-    <!-- Menu mobile (masqué par défaut) -->
-    <div class="mobile-menu">
-        <button class="mobile-menu-close">
-            <i class="fas fa-times"></i>
-        </button>
-        
-        <div class="search-container">
-            <form action="search.php" method="get">
-                <input type="text" name="q" placeholder="Recherche">
-                <button type="submit"><i class="fas fa-search"></i></button>
-            </form>
-        </div>
-        
-        <a href="index.php" class="nav-item">
-            <i class="fas fa-home"></i> Accueil
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-broadcast-tower"></i> Direct
-        </a>
-        
-        <div class="nav-divider"></div>
-        
-        <a href="#" class="nav-item">
-            <i class="fas fa-compass"></i> Explorer
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-globe"></i> Actualité
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-music"></i> Musique
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-monument"></i> Histoire
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-running"></i> Sport
-        </a>
-        
-        <div class="nav-divider"></div>
-        
-        <h3 class="mobile-section-title">Suivez-nous</h3>
-        <div class="mobile-social-icons">
-            <a target="_blank" rel="noreferrer" href="<?php echo FACEBOOK_URL; ?>"><i class="fab fa-facebook icon-facebook"></i></a>
-            <a target="_blank" rel="noreferrer" href="<?php echo INSTAGRAM_URL; ?>"><i class="fab fa-instagram icon-instagram"></i></a>
-            <a target="_blank" rel="noreferrer" href="<?php echo TIKTOK_URL; ?>"><i class="fab fa-tiktok icon-tiktok"></i></a>
-            <a target="_blank" rel="noreferrer" href="<?php echo YOUTUBE_URL; ?>"><i class="fab fa-youtube icon-youtube"></i></a>
-            <a target="_blank" rel="noreferrer" href="<?php echo X_URL; ?>"><i class="fab fa-x-twitter icon-x"></i></a>
-        </div>
-    </div>
-    
+    <?php include 'includes/mobile-menu.php'; ?>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <script src="js/main.js"></script>
     <script src="js/mastodon-timeline.umd.js"></script>
diff --git a/video.php b/video.php
index 3c8c8de..7442ba3 100644
--- a/video.php
+++ b/video.php
@@ -310,49 +310,8 @@ if (empty($videoData) || isset($videoData['error'])) {
         <?php endif; ?>
         <?php include 'includes/footer.php'; ?>
     </div>
-    
-    <!-- Menu mobile (masqué par défaut) -->
-    <button class="mobile-menu-toggle">
-        <i class="fas fa-bars"></i>
-    </button>
-    
-    <div class="mobile-menu">
-        <button class="mobile-menu-close">
-            <i class="fas fa-times"></i>
-        </button>
-        
-        <div class="search-container">
-            <form action="search.php" method="get">
-                <input type="text" name="q" placeholder="Recherche">
-                <button type="submit"><i class="fas fa-search"></i></button>
-            </form>
-        </div>
-        
-        <a href="index.php" class="nav-item">
-            <i class="fas fa-home"></i> Accueil
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-broadcast-tower"></i> Direct
-        </a>
-        
-        <div class="nav-divider"></div>
-        
-        <a href="#" class="nav-item">
-            <i class="fas fa-compass"></i> Explorer
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-globe"></i> Actualité
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-music"></i> Musique
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-monument"></i> Histoire
-        </a>
-        <a href="#" class="nav-item">
-            <i class="fas fa-running"></i> Sport
-        </a>
-    </div>
+
+    <?php include 'includes/mobile-menu.php'; ?>
     
     <!-- Modal de téléchargement -->
     <div id="download-modal" class="modal">