reduce menu at 1200px

css/styles.css

@@ -580,6 +580,72 @@ img {
 }
 
 /* Media Queries */
+@media (max-width: 1200px) and (min-width: 769px) {
+    .sidebar {
+        width: 70px;
+    }
+    
+    .main-content {
+        margin-left: 70px;
+        width: calc(100% - 70px);
+    }
+    
+    .nav-item span, 
+    .tag-item span,
+    .category-title span {
+        display: none;
+    }
+    
+    .nav-item, 
+    .tag-item {
+        justify-content: center;
+        padding: 15px 0;
+        position: relative;
+    }
+    
+    .nav-item i, 
+    .tag-item .tag-dot {
+        margin-right: 0;
+        font-size: 20px;
+    }
+    
+    /* Tooltip for compact mode */
+    .nav-item:hover::after,
+    .tag-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;
+    }
+    
+    .category-title {
+        text-align: center;
+        padding: 10px 0;
+    }
+    
+    .category-title i {
+        margin: 0 auto;
+        display: block;
+    }
+    
+    .logo {
+        text-align: center;
+        padding: 10px 0;
+    }
+    
+    .logo img {
+        height: 30px;
+    }
+}
+
 @media (max-width: 992px) {
     .video-grid {
         grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

index.php

@@ -21,51 +21,51 @@
         </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>