fix style

Author: huangyihua.andy

index.html

@@ -21,7 +21,12 @@
                     </div>
                     <span class="version">v1.0.3</span>
                 </div>
-                <div class="nav-links">
+                <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+                <div class="nav-links" id="navLinks">
                     <a href="#features" class="nav-link" data-i18n="nav.features">特性</a>
                     <a href="#quickstart" class="nav-link" data-i18n="nav.quickstart">快速开始</a>
                     <a href="#docs" class="nav-link" data-i18n="nav.docs">文档</a>

script.js

@@ -180,48 +180,78 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
-// Mobile menu toggle (if needed in future)
-const createMobileMenu = () => {
-    const nav = document.querySelector('.nav-container');
-    const navLinks = document.querySelector('.nav-links');
+// Mobile menu toggle function
+function toggleMobileMenu() {
+    const navLinks = document.getElementById('navLinks');
+    const toggleButton = document.querySelector('.mobile-menu-toggle');
 
-    if (window.innerWidth <= 768) {
-        if (!document.querySelector('.mobile-menu-toggle')) {
-            const toggleButton = document.createElement('button');
-            toggleButton.className = 'mobile-menu-toggle';
-            toggleButton.innerHTML = '☰';
-            toggleButton.style.cssText = `
-                display: block;
-                background: none;
-                border: none;
-                font-size: 24px;
-                color: #374151;
-                cursor: pointer;
-            `;
-            
-            toggleButton.addEventListener('click', () => {
-                navLinks.classList.toggle('mobile-open');
-            });
+    navLinks.classList.toggle('active');
+    toggleButton.classList.toggle('active');
+    
+    // Log mobile menu action
+    if (currentLogger) {
+        currentLogger.info('Mobile menu toggled', {
+            isOpen: navLinks.classList.contains('active')
+        });
+    }
+}
+
+// Close mobile menu when clicking on a nav link
+document.addEventListener('DOMContentLoaded', () => {
+    const navLinks = document.querySelectorAll('.nav-link');
+    const navMenu = document.getElementById('navLinks');
+    const toggleButton = document.querySelector('.mobile-menu-toggle');
+    
+    navLinks.forEach(link => {
+        link.addEventListener('click', () => {
+            if (navMenu.classList.contains('active')) {
+                navMenu.classList.remove('active');
+                if (toggleButton) {
+                    toggleButton.classList.remove('active');
+                }
+                
+                if (currentLogger) {
+                    currentLogger.info('Mobile menu closed via navigation link');
+                }
+            }
+        });
+    });
+    
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (e) => {
+        const isClickInsideNav = e.target.closest('.nav-container');
+        if (!isClickInsideNav && navMenu.classList.contains('active')) {
+            navMenu.classList.remove('active');
+            if (toggleButton) {
+                toggleButton.classList.remove('active');
+            }
 
-            nav.appendChild(toggleButton);
+            if (currentLogger) {
+                currentLogger.info('Mobile menu closed via outside click');
+            }
         }
-    }
-};
+    });
+});
 
 // Performance optimization: Debounced resize handler
 let resizeTimeout;
 window.addEventListener('resize', () => {
     clearTimeout(resizeTimeout);
     resizeTimeout = setTimeout(() => {
-        createMobileMenu();
+        // Close mobile menu if window is resized to desktop size
+        if (window.innerWidth > 768) {
+            const navMenu = document.getElementById('navLinks');
+            const toggleButton = document.querySelector('.mobile-menu-toggle');
+            if (navMenu && navMenu.classList.contains('active')) {
+                navMenu.classList.remove('active');
+                if (toggleButton) {
+                    toggleButton.classList.remove('active');
+                }
+            }
+        }
     }, 250);
 });
 
-// Initialize
-document.addEventListener('DOMContentLoaded', () => {
-    createMobileMenu();
-});
-
 // Add some interactive effects to buttons
 document.querySelectorAll('.btn').forEach(btn => {
     btn.addEventListener('mouseenter', () => {

style.css

@@ -385,18 +385,90 @@ body {
     color: #94a3b8;
 }
 
+/* Mobile Menu Toggle */
+.mobile-menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.mobile-menu-toggle:hover {
+    background-color: #f3f4f6;
+}
+
+.mobile-menu-toggle span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    background-color: #374151;
+    margin: 5px 0;
+    transition: 0.3s;
+    border-radius: 2px;
+}
+
+/* Mobile menu animation */
+.mobile-menu-toggle.active span:nth-child(1) {
+    transform: rotate(-45deg) translate(-5px, 6px);
+}
+
+.mobile-menu-toggle.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.mobile-menu-toggle.active span:nth-child(3) {
+    transform: rotate(45deg) translate(-5px, -6px);
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
     .nav-container {
         padding: 0 16px;
+        position: relative;
+    }
+    
+    .mobile-menu-toggle {
+        display: block;
     }
 
     .nav-links {
-        gap: 20px;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: rgba(255, 255, 255, 0.98);
+        backdrop-filter: blur(10px);
+        border-top: 1px solid #e5e7eb;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        flex-direction: column;
+        padding: 20px;
+        gap: 16px;
+        display: none;
+        z-index: 1000;
+    }
+    
+    .nav-links.active {
+        display: flex;
     }
 
     .nav-link {
-        font-size: 14px;
+        font-size: 16px;
+        padding: 8px 0;
+        border-bottom: 1px solid #f3f4f6;
+        text-align: center;
+    }
+    
+    .nav-link:last-child {
+        border-bottom: none;
+    }
+    
+    .lang-toggle {
+        margin-left: 0;
+        margin-top: 8px;
+        align-self: center;
     }
 
     .hero-title {