100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
"use client";
|
||
import React, { useState } from "react";
|
||
import {
|
||
motion,
|
||
AnimatePresence,
|
||
useScroll,
|
||
useMotionValueEvent,
|
||
} from "motion/react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const HomeIcon = () => <span>🏠</span>;
|
||
const ServicesIcon = () => <span>🛠️</span>;
|
||
const ProductsIcon = () => <span>📦</span>;
|
||
const ContactIcon = () => <span>📞</span>;
|
||
|
||
export const FloatingNav = ({
|
||
navItems = [],
|
||
className,
|
||
}) => {
|
||
const { scrollYProgress } = useScroll();
|
||
const [visible, setVisible] = useState(false);
|
||
|
||
useMotionValueEvent(scrollYProgress, "change", (current) => {
|
||
if (typeof current === "number") {
|
||
let direction = current - scrollYProgress.getPrevious();
|
||
if (scrollYProgress.get() < 0.05) {
|
||
setVisible(false);
|
||
} else {
|
||
if (direction < 0) {
|
||
setVisible(true);
|
||
} else {
|
||
setVisible(false);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
return (
|
||
<AnimatePresence mode="wait">
|
||
<motion.nav
|
||
initial={{ opacity: 1, y: -100 }}
|
||
animate={{ y: visible ? 0 : -100, opacity: visible ? 1 : 0 }}
|
||
transition={{ duration: 0.2 }}
|
||
className={cn(
|
||
"flex max-w-fit fixed top-10 inset-x-0 mx-auto rounded-full shadow-lg z-[5000] pr-8 pl-8 py-2 items-center justify-center space-x-12", // space-x-12 لمسافة واسعة بين الروابط
|
||
"bg-[rgba(23,18,40,0.74)] text-white backdrop-blur-sm", // لون كحلي بنفسجي غامق مع شفافية وخلفية ضبابية
|
||
className
|
||
)}
|
||
>
|
||
{navItems.map((navItem, idx) => (
|
||
<a
|
||
key={`link=${idx}`}
|
||
href={navItem.link}
|
||
className={cn(
|
||
"relative flex items-center space-x-2 hover:text-[rgba(221,74,255,0.9)] transition-colors duration-300 ease-in-out font-semibold text-sm"
|
||
)}
|
||
>
|
||
<span className="block sm:hidden">{navItem.icon}</span>
|
||
<span className="hidden sm:block">{navItem.name}</span>
|
||
</a>
|
||
))}
|
||
|
||
<button
|
||
type="button"
|
||
className=" text-white px-5 py-2 rounded-full font-semibold relative "
|
||
>
|
||
<div className="flex gap-6">
|
||
<span>Home</span>
|
||
<span>service</span>
|
||
<span>Products</span>
|
||
<span>Contact</span>
|
||
</div>
|
||
<span className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-purple-400 to-transparent h-px" />
|
||
</button>
|
||
</motion.nav>
|
||
</AnimatePresence>
|
||
);
|
||
};
|
||
|
||
// مثال الاستخدام مع 4 روابط
|
||
export default function App() {
|
||
const navItems = [
|
||
{ name: "Home", link: "/", icon: <HomeIcon /> },
|
||
{ name: "Services", link: "/services", icon: <ServicesIcon /> },
|
||
{ name: "Products", link: "/products", icon: <ProductsIcon /> },
|
||
{ name: "Contact", link: "/contact", icon: <ContactIcon /> },
|
||
];
|
||
|
||
return (
|
||
<>
|
||
<FloatingNav navItems={navItems} />
|
||
<div style={{ height: "200vh", paddingTop: 150 }}>
|
||
<h1 className="text-white text-center">
|
||
Scroll down and up to see the navbar appear/disappear
|
||
</h1>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|