"use client"; // import { useSubscriber } from "@ctx/SubscriberContext"; import Image from "next/image"; import Link from "next/link"; import { useContext, useEffect, useRef, useState } from "react"; import { motion } from "framer-motion"; import { useRouter } from "next/navigation"; import logo from "../../assets/images/logo.png"; const Navbar = ({ theme }) => { const router = useRouter(); const NavBarData = [ { id: 1, name: "Electronics", children: [ { id: 101, name: "Laptops", }, { id: 102, name: "Smartphones", }, { id: 103, name: "Cameras", }, ], }, { id: 2, name: "Fashion", children: [ { id: 201, name: "Men's Clothing", }, { id: 202, name: "Women's Clothing", }, { id: 203, name: "Accessories", }, ], }, { id: 3, name: "Home & Kitchen", children: [ { id: 301, name: "Furniture", }, { id: 302, name: "Decor", }, { id: 303, name: "Kitchen Appliances", }, ], }, { id: 4, name: "Sports", children: [], }, ]; const [closeNavbar, setClosNavbar] = useState(false); const [activeStepNavbar, setActiveStepNavbar] = useState(null); const [isScrolled, setIsScrolled] = useState(false); // const [hoverItemNavbar, setHoverItemNavbar] = useState(-1); const [responsiveNavBarItemStep, setResponsiveNavBarItemStep] = useState(false); const ref = useRef(null); const handleResetFramer = () => { setRestFramer(false); setTimeout(() => { setRestFramer(true); }, 100); }; const toLeft = { visible: (custom) => ({ opacity: ["0", "1"], // y: ["-30%", "0%"], transition: { delay: custom * 0.06 }, }), }; useEffect(() => { const handleScroll = () => { const scrollTop = window.scrollY; setIsScrolled(scrollTop > 200); }; window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); return ( <> {/*

salam

*/}
{/* reponsive navbar */} {/* responsive part */} {/* responsive part */} {/* responsive part */} {/* responsive part */} {/* responsive part */}
{/* */}
llc
{/* */}
setClosNavbar(true)} >
{closeNavbar && (
)}
setClosNavbar(false)} >
{/* */}
llc
{/* */}
{NavBarData.map((e, index) => ( <> {/* */} <>
{ if (e.children.length > 0) { setResponsiveNavBarItemStep(index); setActiveStepNavbar(e.id); } }} > {e.name} {e.children.length > 0 ? (
) : ( "" )}
{/* {" "} */} {responsiveNavBarItemStep === index && e.children.length > 0 && e.id == activeStepNavbar && (
{e.children.map((s, index) => ( //

{s.name}

// ))}
)} ))}
); }; export default Navbar;