refactor: include mobile menu

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> 
+</div>