feat(ui): implement sidebar toggle and improve styling

- Add toggle functionality for sidebar with smooth animation
- Update color scheme and scrollbar styling
- Center search results and improve avatar icon display
- Remove duplicate video entry from data

css/style.css

@@ -3,6 +3,8 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    scrollbar-color: #000000 #000000;
+    scrollbar-width: auto;
 }
 
 body {
@@ -26,7 +28,7 @@ body {
     justify-content: space-between;
     padding: 0 16px;
     height: 56px;
-    background-color: #202020;
+    background-color: #000000;
     border-bottom: 1px solid #303030;
     position: sticky;
     top: 0;
@@ -165,10 +167,18 @@ body {
 /* 侧边栏样式 */
 .sidebar {
     width: 240px;
-    background-color: #202020;
+    background-color: #000000;
     border-right: 1px solid #303030;
     overflow-y: auto;
     flex-shrink: 0;
+    transition: width 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
+}
+
+.sidebar.collapsed {
+    width: 0;
+    transform: translateX(-100%);
+    opacity: 0;
+    overflow: hidden;
 }
 
 .sidebar-nav {
@@ -371,6 +381,14 @@ body {
     border-radius: 50%;
     margin-right: 16px;
     background-color: #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.avatar-img {
+    font-size: 20px;
+    color: #666;
 }
 
 .video-details {
@@ -545,8 +563,10 @@ body {
 .search-results {
     position: fixed;
     top: 56px;
-    left: 0;
+    left: 50%;
-    right: 0;
+    transform: translateX(-55%);
+    width: 100%;
+    max-width: 640px;
     background-color: #202020;
     border-bottom: 1px solid #303030;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
@@ -691,4 +711,23 @@ body {
     .shorts-grid {
         grid-template-columns: repeat(4, 1fr);
     }
+}
+
+/* 滚动条样式 - Webkit浏览器 */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: #000000;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #000000;
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #000000;
 }

js/script.js

@@ -275,28 +275,6 @@ let videos = [
     "category": "tech",
     "type": "video"
   },
-  {
-    "id": 25,
-    "title": "Commodore 128 Alternate Universe",
-    "channel": "The 8-Bit Guy",
-    "views": "17,498",
-    "uploadDate": "4 months ago",
-    "duration": "8:35",
-    "thumbnail": "img/cover/tech-25.jpg",
-    "category": "tech",
-    "type": "video"
-  },
-  {
-    "id": 25,
-    "title": "Commodore 128 Alternate Universe",
-    "channel": "The 8-Bit Guy",
-    "views": "17,498",
-    "uploadDate": "4 months ago",
-    "duration": "8:35",
-    "thumbnail": "img/cover/tech-25.jpg",
-    "category": "tech",
-    "type": "video"
-  },
   {
     "id": 26,
     "title": "\"The Roller Coaster\" - Behind the Scenes - Time Lapse & Commentary",
@@ -576,7 +554,7 @@ function createVideoCard(video) {
         </div>
         <div class="video-info">
             <div class="video-channel-avatar">
-                <i class="fas fa-user"></i>
+                <i class="fas fa-user avatar-img"></i>
             </div>
             <div class="video-details">
                 <h3 class="video-title">${video.title}</h3>
@@ -745,6 +723,14 @@ function renderSearchResults(results, query) {
 
 // Bind events to the DOM elements
 function bindEvents() { // Bind events to the DOM elements
+    // Menu button event - toggle sidebar
+    const menuBtn = document.querySelector('.menu-btn');
+    const sidebar = document.querySelector('.sidebar');
+    
+    menuBtn.addEventListener('click', () => {
+        sidebar.classList.toggle('collapsed');
+    });
+    
     // Search event
     searchInput.addEventListener('input', (e) => {
         performSearch(e.target.value);