🎨 修复菜单部样式问题

src/assets/scss/main.scss

@@ -226,6 +226,9 @@ nav.main-nav {
       color: var(--color-primary);
     }
   }
+  .mobile-close-button {
+    display: none;
+  }
   a {
     display: block;
     color: var(--color-text);
@@ -988,10 +991,27 @@ footer {
       }
     }
   }
-  nav.main-nav .nav-item {
-    padding: 0;
-    a {
-      padding: 10px 5px;
+  nav.main-nav {
+
+    .mobile-close-button {
+      display: block;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 40px;
+      height: 40px;
+      z-index: 100;
+    }
+    .nav-list {
+      position: relative;
+      padding: 0;
+
+      .nav-item {
+        padding: 0;
+        a {
+          padding: 10px 5px;
+        }
+      }
     }
   }
 }

src/components/NavBar.vue

@@ -16,6 +16,7 @@
             <ChannelLink :item="item" />
           </li>
         </ul>
+        <button class="mobile-close-button" @click="isMenuOpen = false"><Icon name="material-symbols:close" /></button>
       </nav>
       <div class="action-buttons">
         <button 
@@ -108,4 +109,10 @@ function goSearch() {
     window.location.href = `/search/?keyword=${encodeURIComponent(keyword.value.trim())}`;
   }
 }
+
+watch(route, () => {
+  isMenuOpen.value = false;
+  isExtraMenuOpen.value = false;
+  isSearchOpen.value = false;
+});
 </script>