115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Menu, X } from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ label: '首页', href: '#hero' },
|
|
{ label: '关于我们', href: '#about' },
|
|
{ label: '核心业务', href: '#services' },
|
|
{ label: '联系方式', href: '#contact' },
|
|
];
|
|
|
|
const Navbar: React.FC = () => {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
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 || 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 || 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 || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'}`}>
|
|
FEIE TECH
|
|
</span>
|
|
</a>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.label}
|
|
href={item.href}
|
|
className={`font-serif text-sm tracking-widest uppercase hover:text-feie-gold transition-colors duration-300 ${
|
|
isScrolled ? 'text-feie-dark' : 'text-feie-white/90'
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
<a
|
|
href="#contact"
|
|
className={`px-5 py-2 border font-serif text-sm transition-all duration-300 ${
|
|
isScrolled
|
|
? 'border-feie-dark text-feie-dark hover:bg-feie-dark hover:text-feie-white'
|
|
: 'border-feie-white text-feie-white hover:bg-feie-white hover:text-feie-dark'
|
|
}`}
|
|
>
|
|
合作咨询
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile Toggle */}
|
|
<button
|
|
className="md:hidden focus:outline-none"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
{isMobileMenuOpen ? (
|
|
<X className={isScrolled || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'} />
|
|
) : (
|
|
<Menu className={isScrolled || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<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-lg text-feie-dark hover:text-feie-gold transition-colors"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|