a
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
const navLinks = [
|
||||
{ name: "صفحه اصلی", href: "/" },
|
||||
{ name: "خدمات", href: "/services" },
|
||||
{ name: "نمونه کارها", href: "/portfolio" },
|
||||
{ name: "درباره ما", href: "/about" },
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
// تغییر ظاهر هدر هنگام اسکرول به پایین
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
// جلوگیری از اسکرول شدن صفحه وقتی منوی موبایل باز است
|
||||
useEffect(() => {
|
||||
if (isMobileMenuOpen) {
|
||||
document.body.style.overflow = "hidden";
|
||||
} else {
|
||||
document.body.style.overflow = "unset";
|
||||
}
|
||||
}, [isMobileMenuOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 border-b ${
|
||||
isScrolled
|
||||
? "bg-gray-950/60 backdrop-blur-md border-white/10 py-3" // حالت شیشه‌ای هنگام اسکرول
|
||||
: "bg-transparent border-transparent py-5" // حالت شفاف در بالای صفحه
|
||||
}`}
|
||||
>
|
||||
<div className="max-w-6xl mx-auto px-6 flex items-center justify-between">
|
||||
{/* لوگو */}
|
||||
<Link href="/" className="relative z-50 flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-600 to-blue-400 flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">N</span>
|
||||
</div>
|
||||
<span className="text-neutral-50 font-medium tracking-wide">
|
||||
نوین‌تک
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* منوی دسکتاپ */}
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="text-sm text-neutral-400 hover:text-neutral-50 transition-colors duration-300"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* دکمه تماس / اکشن دسکتاپ */}
|
||||
<div className="hidden md:block">
|
||||
<button className="text-sm font-medium text-white px-5 py-2 rounded-full border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm">
|
||||
شروع پروژه
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* دکمه همبرگری موبایل */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(true)}
|
||||
className="md:hidden relative z-50 p-2 text-neutral-300 hover:text-white transition-colors"
|
||||
aria-label="Toggle Menu"
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<line x1="4" y1="8" x2="20" y2="8" />
|
||||
<line x1="4" y1="16" x2="20" y2="16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* منوی موبایل (Drawer) */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<>
|
||||
{/* لایه تاریک پس‌زمینه (Overlay) */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="fixed inset-0 z-[60] bg-gray-950/60 backdrop-blur-sm"
|
||||
/>
|
||||
|
||||
{/* پنل کشویی از سمت راست */}
|
||||
<motion.div
|
||||
initial={{ x: "100%" }} // شروع از بیرون صفحه (سمت راست)
|
||||
animate={{ x: 0 }} // ورود به صفحه
|
||||
exit={{ x: "100%" }} // خروج به سمت راست
|
||||
transition={{
|
||||
duration: 0.5,
|
||||
ease: [0.16, 1, 0.3, 1], // همان منحنی نرم اپل-استایل
|
||||
}}
|
||||
className="fixed top-0 right-0 bottom-0 w-3/4 max-w-sm z-[70] bg-gray-950/90 backdrop-blur-xl border-l border-white/10 shadow-2xl flex flex-col"
|
||||
>
|
||||
<div className="flex items-center justify-between p-6 border-b border-white/10">
|
||||
<span className="text-neutral-50 font-medium">منو</span>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="p-2 text-neutral-400 hover:text-white transition-colors bg-white/5 rounded-full"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col p-6 gap-6 flex-1 overflow-y-auto">
|
||||
{navLinks.map((link, i) => (
|
||||
<motion.div
|
||||
key={link.name}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.1 + i * 0.1, duration: 0.4 }}
|
||||
>
|
||||
<Link
|
||||
href={link.href}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="text-lg text-neutral-300 hover:text-white transition-colors"
|
||||
>
|
||||
{link.name}
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6 border-t border-white/10">
|
||||
<button className="w-full py-3 rounded-xl bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors">
|
||||
شروع پروژه
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user