张翔
fecbfd1990
refactor: 优化代码健壮性和类型安全 style: 更新字体样式和全局CSS fix: 修复IntersectionObserver潜在空引用问题 chore: 更新依赖和ESLint配置 build: 更新构建ID和路由配置
103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Menu, X } from 'lucide-react';
|
|
import { NAVIGATION } from '@/lib/constants';
|
|
import { cn } from '@/lib/utils';
|
|
import { useFocusTrap } from '@/hooks/use-focus-trap';
|
|
|
|
interface MobileMenuProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function MobileMenu({ className }: MobileMenuProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const focusTrapRef = useFocusTrap<HTMLDivElement>(isOpen);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
|
|
return () => {
|
|
document.body.style.overflow = 'unset';
|
|
};
|
|
}, [isOpen]);
|
|
|
|
const handleNavClick = (href: string) => {
|
|
setIsOpen(false);
|
|
const element = document.querySelector(href);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (event: React.KeyboardEvent, href?: string) => {
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
event.preventDefault();
|
|
if (href) {
|
|
handleNavClick(href);
|
|
} else {
|
|
setIsOpen(!isOpen);
|
|
}
|
|
}
|
|
if (event.key === 'Escape' && isOpen) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={cn('lg:hidden', className)} ref={focusTrapRef}>
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
onKeyDown={(e) => handleKeyDown(e)}
|
|
className="p-2 rounded-md hover:bg-[#F5F5F5] transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-offset-2"
|
|
aria-label={isOpen ? '关闭菜单' : '打开菜单'}
|
|
aria-expanded={isOpen}
|
|
aria-controls="mobile-menu-panel"
|
|
>
|
|
{isOpen ? (
|
|
<X className="w-6 h-6 text-[#171717]" />
|
|
) : (
|
|
<Menu className="w-6 h-6 text-[#171717]" />
|
|
)}
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40"
|
|
onClick={() => setIsOpen(false)}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<nav
|
|
id="mobile-menu-panel"
|
|
className="fixed top-16 left-0 right-0 bg-white border-b border-[#E5E5E5] z-50 shadow-lg"
|
|
role="navigation"
|
|
aria-label="移动端导航"
|
|
>
|
|
<div className="container-wide py-4">
|
|
<ul className="space-y-1" role="list">
|
|
{NAVIGATION.map((item) => (
|
|
<li key={item.id}>
|
|
<button
|
|
onClick={() => handleNavClick(item.href)}
|
|
onKeyDown={(e) => handleKeyDown(e, item.href)}
|
|
className="block w-full text-left px-4 py-3 text-[#171717] hover:bg-[#FEF2F4] hover:text-[#C41E3A] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:ring-inset"
|
|
>
|
|
{item.label}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|