81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { motion, useScroll, useMotionValueEvent, useSpring } from 'framer-motion';
|
|
|
|
const Navbar: React.FC = () => {
|
|
const [hidden, setHidden] = useState(false);
|
|
const { scrollY, scrollYProgress } = useScroll();
|
|
|
|
const scaleX = useSpring(scrollYProgress, {
|
|
stiffness: 100,
|
|
damping: 30,
|
|
restDelta: 0.001
|
|
});
|
|
|
|
useMotionValueEvent(scrollY, "change", (latest) => {
|
|
const previous = scrollY.getPrevious() || 0;
|
|
if (latest > previous && latest > 150) {
|
|
setHidden(true);
|
|
} else {
|
|
setHidden(false);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<motion.nav
|
|
variants={{
|
|
visible: { y: 0 },
|
|
hidden: { y: "-100%" },
|
|
}}
|
|
animate={hidden ? "hidden" : "visible"}
|
|
transition={{ duration: 0.35, ease: "easeInOut" }}
|
|
className="fixed w-full z-40 top-0 left-0 border-b border-gray-200 dark:border-white/10 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md"
|
|
>
|
|
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<motion.div
|
|
whileHover={{ rotate: 180 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<span className="material-symbols-outlined text-xl dark:text-white text-black">dns</span>
|
|
</motion.div>
|
|
<span className="font-display font-bold text-lg tracking-tight">Bay Area Affiliates</span>
|
|
</div>
|
|
|
|
<div className="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600 dark:text-gray-400">
|
|
{['Services', 'Features', 'Blog', 'Contact'].map((item) => (
|
|
<motion.a
|
|
key={item}
|
|
href={`#${item.toLowerCase()}`}
|
|
className="hover:text-black dark:hover:text-white transition-colors relative group px-2 py-1"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
{item}
|
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-black dark:bg-white transition-all duration-300 ease-out group-hover:w-full"></span>
|
|
</motion.a>
|
|
))}
|
|
</div>
|
|
|
|
<motion.a
|
|
href="#"
|
|
className="text-sm font-medium bg-black dark:bg-white text-white dark:text-black px-4 py-2 rounded-full transition-all"
|
|
whileHover={{
|
|
scale: 1.05,
|
|
boxShadow: "0px 0px 15px rgba(100, 100, 100, 0.5)"
|
|
}}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Client Portal
|
|
</motion.a>
|
|
</div>
|
|
|
|
{/* Scroll Progress Indicator */}
|
|
<motion.div
|
|
className="absolute bottom-0 left-0 right-0 h-[2px] bg-blue-600 dark:bg-blue-500 origin-left z-50"
|
|
style={{ scaleX }}
|
|
/>
|
|
</motion.nav>
|
|
);
|
|
};
|
|
|
|
export default Navbar; |