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));