调整 Navbar 优化移动菜单

components/Navbar.tsx

@@ -22,20 +22,30 @@ const Navbar: React.FC = () => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setIsMobileMenuOpen(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   return (
     <nav
       className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
-        isScrolled
-          ? 'bg-feie-cream/90 backdrop-blur-md shadow-sm py-4'
+        isScrolled || isMobileMenuOpen
+          ? 'bg-feie-cream/95 backdrop-blur-md shadow-sm py-4'
           : 'bg-transparent py-6'
       }`}
     >
       <div className="container mx-auto px-6 flex justify-between items-center">
         <a href="#" className="flex items-center gap-2 group">
-          <div className={`w-8 h-8 rounded-sm border-2 flex items-center justify-center transition-colors ${isScrolled ? 'border-feie-dark text-feie-dark' : 'border-feie-white text-feie-white'}`}>
+          <div className={`w-8 h-8 rounded-sm border-2 flex items-center justify-center transition-colors ${isScrolled || isMobileMenuOpen ? 'border-feie-dark text-feie-dark' : 'border-feie-white text-feie-white'}`}>
              <span className="font-serif font-bold text-lg">F</span>
           </div>
-          <span className={`font-serif text-xl font-bold tracking-wide transition-colors ${isScrolled ? 'text-feie-dark' : 'text-feie-white'}`}>
+          <span className={`font-serif text-xl font-bold tracking-wide transition-colors ${isScrolled || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'}`}>
             FEIE TECH
           </span>
         </a>
@@ -71,28 +81,32 @@ const Navbar: React.FC = () => {
           onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
         >
           {isMobileMenuOpen ? (
-            <X className={isScrolled ? 'text-feie-dark' : 'text-feie-white'} />
+            <X className={isScrolled || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'} />
           ) : (
-            <Menu className={isScrolled ? 'text-feie-dark' : 'text-feie-white'} />
+            <Menu className={isScrolled || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'} />
           )}
         </button>
       </div>
 
       {/* Mobile Menu */}
-      {isMobileMenuOpen && (
-        <div className="md:hidden absolute top-full left-0 w-full bg-feie-cream border-t border-gray-200 py-4 shadow-lg flex flex-col items-center space-y-4">
+      <div 
+        className={`md:hidden absolute top-full left-0 w-full bg-feie-cream/95 backdrop-blur-md border-t border-gray-200 shadow-lg flex flex-col items-center transition-all duration-300 ease-in-out overflow-hidden ${
+          isMobileMenuOpen ? 'max-h-96 opacity-100 py-6' : 'max-h-0 opacity-0 py-0'
+        }`}
+      >
+        <div className="flex flex-col items-center space-y-6 w-full">
           {navItems.map((item) => (
             <a
               key={item.label}
               href={item.href}
-              className="font-serif text-feie-dark hover:text-feie-gold"
+              className="font-serif text-lg text-feie-dark hover:text-feie-gold transition-colors"
               onClick={() => setIsMobileMenuOpen(false)}
             >
               {item.label}
             </a>
           ))}
         </div>
-      )}
+      </div>
     </nav>
   );
 };