65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
|
|
interface MobileMenuProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function MobileMenu({ onClose }: MobileMenuProps) {
|
|
const menuItems = [
|
|
{ href: "/en", label: "Home" },
|
|
{ href: "/en/products", label: "Products" },
|
|
{ href: "/en/about", label: "About" },
|
|
{ href: "/en/contact", label: "Contact" },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<motion.div
|
|
className="fixed inset-0 bg-black/50 z-50"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={onClose}
|
|
/>
|
|
<motion.div
|
|
className="fixed top-0 left-0 bottom-0 w-80 bg-white z-50 shadow-xl"
|
|
initial={{ x: "-100%" }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: "-100%" }}
|
|
transition={{ type: "tween", duration: 0.3 }}
|
|
>
|
|
<div className="p-6">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<h2 className="text-2xl font-serif">ManoonOils</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2"
|
|
aria-label="Close menu"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<nav className="space-y-4">
|
|
{menuItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="block text-xl font-serif py-2 border-b border-border/30"
|
|
onClick={onClose}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}
|