Spaces:
Sleeping
Sleeping
File size: 3,682 Bytes
56ea4c7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
import { useState, useEffect } from "react";
import { Menu, X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { Button } from "./ui/button";
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
export default function Header() {
const [isVisible, setIsVisible] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
const handleScroll = () => {
const currentScrollY = window.scrollY;
if (currentScrollY < 50) {
setIsVisible(true);
} else if (currentScrollY > lastScrollY) {
setIsVisible(false);
} else {
setIsVisible(true);
}
setLastScrollY(currentScrollY);
};
window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll);
}, [lastScrollY]);
const scrollToSection = (id: string) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
setIsOpen(false);
}
};
const navItems = [
{ label: "About Us", id: "about" },
{ label: "Why Trust Us", id: "trust" },
{ label: "Connect", id: "contact" },
];
return (
<motion.header
initial={{ y: 0 }}
animate={{ y: isVisible ? 0 : -100 }}
transition={{ duration: 0.3 }}
className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm"
>
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Logo */}
<div className="flex-shrink-0">
<div className="flex items-center space-x-2">
<img
src="/chopfreshinternational.png"
alt="ChopFresh Logo"
className="h-8 w-auto object-contain"
/>
<button
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
className="text-2xl font-bold text-green-600 hover:text-green-700 transition-colors"
>
ChopFresh International
</button>
</div>
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center space-x-8">
{navItems.map((item) => (
<button
key={item.id}
onClick={() => scrollToSection(item.id)}
className="text-gray-700 hover:text-green-600 font-medium transition-colors"
>
{item.label}
</button>
))}
</nav>
{/* Mobile Menu */}
<Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetTrigger asChild className="md:hidden">
<Button variant="ghost" size="icon">
<Menu className="h-6 w-6" />
</Button>
</SheetTrigger>
<SheetContent side="right" className="w-[300px] sm:w-[400px]">
<nav className="flex flex-col space-y-6 mt-8">
{navItems.map((item) => (
<button
key={item.id}
onClick={() => scrollToSection(item.id)}
className="text-lg text-gray-700 hover:text-green-600 font-medium transition-colors text-left"
>
{item.label}
</button>
))}
</nav>
</SheetContent>
</Sheet>
</div>
</div>
</motion.header>
);
}
|