fix reducing menu on video page

css/video-page.css

@@ -596,6 +596,64 @@
     }
 }
 
+/* Media Queries pour le menu réduit */
+@media (max-width: 1200px) and (min-width: 1001px) {
+    .sidebar {
+        width: 70px;
+    }
+    
+    .main-content {
+        margin-left: 70px;
+        width: calc(100% - 70px);
+    }
+    
+    .nav-item span {
+        display: none;
+    }
+    
+    /* Masquer complètement la section Hashtags */
+    .category-title, 
+    .tag-item {
+        display: none;
+    }
+    
+    .nav-item {
+        justify-content: center;
+        padding: 15px 0;
+        position: relative;
+    }
+    
+    .nav-item i {
+        margin-right: 0;
+        font-size: 20px;
+    }
+    
+    /* Tooltip for compact mode */
+    .nav-item:hover::after {
+        content: attr(data-title);
+        position: absolute;
+        left: 70px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: var(--sidebar-bg);
+        color: var(--text-color);
+        padding: 5px 10px;
+        border-radius: 4px;
+        white-space: nowrap;
+        box-shadow: 0 1px 5px rgba(0,0,0,0.2);
+        z-index: 100;
+    }
+    
+    .logo {
+        text-align: center;
+        padding: 10px 0;
+    }
+    
+    .logo img {
+        height: 30px;
+    }
+}
+
 /* Message d'erreur */
 .error-message {
     text-align: center;
@@ -603,3 +661,69 @@
     max-width: 500px;
     margin: 0 auto;
 }
+
+/* Styles pour la barre latérale */
+.sidebar {
+    width: 250px;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--sidebar-bg);
+    overflow-y: auto;
+    padding: 15px 0;
+    z-index: 100;
+    transition: width 0.3s ease;
+}
+
+.sidebar-nav {
+    margin-bottom: 30px;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 15px;
+    font-size: 18px;
+    font-weight: 500;
+    transition: background-color 0.2s;
+    text-decoration: none;
+    color: var(--text-color);
+}
+
+.nav-item:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.nav-item i, .nav-item img {
+    margin-right: 15px;
+    width: 24px;
+    text-align: center;
+}
+
+.tag-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 15px;
+    font-size: 16px;
+    text-decoration: none;
+    color: var(--text-color);
+}
+
+.tag-item .tag-dot {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: var(--primary-red);
+    margin-right: 15px;
+}
+
+.logo {
+    display: block;
+    padding: 10px 15px;
+    margin-bottom: 20px;
+}
+
+.logo img {
+    height: 40px;
+} 

video.php

@@ -108,51 +108,51 @@ if (empty($videoData) || isset($videoData['error'])) {
         </a>
         
         <nav class="sidebar-nav">
-            <a href="index.php" class="nav-item">
+            <a href="index.php" class="nav-item" data-title="Accueil">
-                <i class="fas fa-home"></i> Accueil
+                <i class="fas fa-home"></i> <span>Accueil</span>
             </a>
-            <a href="#" class="nav-item">
+            <a href="#" class="nav-item" data-title="Direct">
-                <i class="fas fa-broadcast-tower"></i> Direct
+                <i class="fas fa-broadcast-tower"></i> <span>Direct</span>
             </a>
             
             <div class="nav-divider"></div>
             
-            <a href="#" class="nav-item">
+            <a href="#" class="nav-item" data-title="Explorer">
-                <i class="fas fa-compass"></i> Explorer
+                <i class="fas fa-compass"></i> <span>Explorer</span>
             </a>
-            <a href="#" class="nav-item">
+            <a href="#" class="nav-item" data-title="Actualité">
-                <i class="fas fa-globe"></i> Actualité
+                <i class="fas fa-globe"></i> <span>Actualité</span>
             </a>
-            <a href="#" class="nav-item">
+            <a href="#" class="nav-item" data-title="Musique">
-                <i class="fas fa-music"></i> Musique
+                <i class="fas fa-music"></i> <span>Musique</span>
             </a>
-            <a href="#" class="nav-item">
+            <a href="#" class="nav-item" data-title="Histoire">
-                <i class="fas fa-monument"></i> Histoire
+                <i class="fas fa-monument"></i> <span>Histoire</span>
             </a>
-            <a href="#" class="nav-item">
+            <a href="#" class="nav-item" data-title="Sport">
-                <i class="fas fa-running"></i> Sport
+                <i class="fas fa-running"></i> <span>Sport</span>
             </a>
             
             <div class="nav-divider"></div>
             
             <div class="category-title">
-                <i class="fas fa-hashtag"></i> Hashtags
+                <i class="fas fa-hashtag"></i> <span>Hashtags</span>
             </div>
             
-            <a href="#" class="tag-item">
+            <a href="#" class="tag-item" data-title="Interview">
-                <div class="tag-dot"></div> Interview
+                <div class="tag-dot"></div> <span>Interview</span>
             </a>
-            <a href="#" class="tag-item">
+            <a href="#" class="tag-item" data-title="Conférence">
-                <div class="tag-dot"></div> Conférence
+                <div class="tag-dot"></div> <span>Conférence</span>
             </a>
-            <a href="#" class="tag-item">
+            <a href="#" class="tag-item" data-title="Colonialisme">
-                <div class="tag-dot"></div> Colonialisme
+                <div class="tag-dot"></div> <span>Colonialisme</span>
             </a>
-            <a href="#" class="tag-item">
+            <a href="#" class="tag-item" data-title="La Réunion">
-                <div class="tag-dot"></div> La Réunion
+                <div class="tag-dot"></div> <span>La Réunion</span>
             </a>
-            <a href="#" class="tag-item">
+            <a href="#" class="tag-item" data-title="Afrique">
-                <div class="tag-dot"></div> Afrique
+                <div class="tag-dot"></div> <span>Afrique</span>
             </a>
         </nav>
     </div>