501 lines
22 KiB
JavaScript
501 lines
22 KiB
JavaScript
"use client";
|
||
import React, { useContext, useEffect, useState } from "react";
|
||
import Image from "next/image";
|
||
import logo from "../../public/images/logo.png";
|
||
import logoWhite from "../../public/images/logo-white.png";
|
||
import logoBlack from "../../public/images/logo.png";
|
||
import divider from "../../public/images/divider.png";
|
||
import cover from "../../public/images/cover.png";
|
||
import { Menu } from "@headlessui/react";
|
||
|
||
import { motion } from "framer-motion";
|
||
import Link from "next/link";
|
||
import PersianNumber from "plugins/PersianNumber";
|
||
import CartNavbar from "./CartNavbar/page";
|
||
import AppContext from "@ctx/AppContext";
|
||
import BottomSheetCart from "plugins/bottomSheet/BottomSheetCart";
|
||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||
import SearchSideBar from "@comp/Category/Mobile/Component/SearchSideBar/page";
|
||
|
||
const Navbar = ({ theme }) => {
|
||
const [open, setOpen] = useState(false);
|
||
|
||
const CTX = useContext(AppContext);
|
||
const dataNav = CTX.state.navData;
|
||
const profile = CTX.state.profile;
|
||
const cart = CTX.state.cart;
|
||
|
||
const [navItemHover, setNavItemHover] = useState(null);
|
||
const [isDesktop, setIsDesktop] = useState(null);
|
||
const [closeNavbar, setClosNavbar] = useState(false);
|
||
const [isScrolled, setIsScrolled] = useState(false);
|
||
const [smallDashboard, setSmallDashboard] = useState(false);
|
||
|
||
const handleItemNavber = (index) => {
|
||
setNavItemHover(index);
|
||
console.log("index", index);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const handleResize = () => {
|
||
setIsDesktop(window.innerWidth > 1000); // You can adjust the width threshold as needed
|
||
};
|
||
|
||
// Set initial window size
|
||
handleResize();
|
||
|
||
// Add event listener to handle window resize
|
||
window.addEventListener("resize", handleResize);
|
||
|
||
// Remove event listener on component unmount
|
||
return () => {
|
||
window.removeEventListener("resize", handleResize);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const handleScroll = () => {
|
||
const scrollTop = window.scrollY;
|
||
setIsScrolled(scrollTop > 200);
|
||
};
|
||
|
||
window.addEventListener("scroll", handleScroll);
|
||
|
||
return () => {
|
||
window.removeEventListener("scroll", handleScroll);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<>
|
||
{isDesktop && (
|
||
<div className=" pt-10 tr03">
|
||
<div className="flex justify-between rtl px-20 ">
|
||
<div
|
||
className={`w-[100px] mt-0 py-5 border-b-[2px] relative z-10 ${
|
||
theme == 0 ? "border-white" : "border-black"
|
||
} `}
|
||
>
|
||
<Link href={"/"}>
|
||
<Image src={theme == 0 ? logoWhite : logoBlack} />
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="flex rtl py-5 ">
|
||
{profile?.length <= 0 ? (
|
||
<div className="flex">
|
||
<Link href={"/login"}>
|
||
<div className="bg-gray-100 py-2 px-5 rounded-xl text-sm ">
|
||
ورود / عضویت{" "}
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<div className="flex">
|
||
<div>
|
||
<div
|
||
className="bg-gray-100 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
|
||
onClick={() => setSmallDashboard(!smallDashboard)}
|
||
>
|
||
<p className="mb-0">
|
||
{profile?.firstName} {profile?.lastName}
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-primary-500 mr-2"></div>
|
||
</div>
|
||
|
||
{smallDashboard && (
|
||
<div
|
||
className={`relative !z-[100] tr03 ${
|
||
smallDashboard ? "opacity-100" : "opacity-0"
|
||
} `}
|
||
onMouseEnter={() => setSmallDashboard(true)}
|
||
onMouseLeave={() => setSmallDashboard(false)}
|
||
>
|
||
<div className="absolute w-[270px] bg-gray-100 rounded-xl mt-2 mr-[-87px] overflow-hidden">
|
||
<div>
|
||
<ul className="p-2 ">
|
||
<li className="group cursor-pointer">
|
||
<Link href={"/profile"}>
|
||
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||
داشبورد
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||
</div>
|
||
</Link>
|
||
</li>
|
||
|
||
<li className="group cursor-pointer">
|
||
<Link href={"/profile/orders"}>
|
||
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||
پیگیری سفارش
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||
</div>
|
||
</Link>
|
||
</li>
|
||
|
||
<li className="group cursor-pointer">
|
||
<Link href={"/profile/address"}>
|
||
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||
آدرس ها{" "}
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||
</div>
|
||
</Link>
|
||
</li>
|
||
|
||
<li
|
||
className="flex justify-between p-2 rounded-full group hover:bg-red-200 tr03 cursor-pointer"
|
||
onClick={() =>
|
||
CTX.setBottomSheetLogOutOpen(true)
|
||
}
|
||
>
|
||
<p className="mb-0 text-sm text-red-500 group-hover: ">
|
||
خروج{" "}
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<CartNavbar />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-20">
|
||
<div
|
||
className={`w-full h-[2px] mt-4 relative top-[-17px] rounded-full overflow-hidden opacity-10 ${
|
||
theme == 0 ? "bg-gray-300" : "bg-gray-500"
|
||
} `}
|
||
></div>
|
||
</div>
|
||
|
||
<div
|
||
className={`flex justify-center rtl pt-3 tr03 z-50 tr03 ${
|
||
navItemHover != null ? "bg-navbar rounded-xl " : "bg-transparent"
|
||
}${
|
||
isScrolled
|
||
? " !fixed top-0 w-full bg-white "
|
||
: " relative top-[-18px] "
|
||
}
|
||
|
||
${theme == 0 ? "" : "!bg-gray-100"}`}
|
||
>
|
||
<div className="flex rtl">
|
||
{dataNav?.map((e, index) => (
|
||
<p
|
||
className={`mb-0 pb-4 px-2 tr03 cursor-pointer ${
|
||
navItemHover == index
|
||
? "font-bold border-b-[3px] border-gray-400 text-black "
|
||
: "border-b-[3px] border-transparent "
|
||
}
|
||
${theme == 0 ? "text-gray-300" : "text-gray-900"}
|
||
${theme == 0 && isScrolled ? "text-gray-900" : ""}`}
|
||
onMouseEnter={() => handleItemNavber(index)}
|
||
onMouseLeave={() => setNavItemHover(null)}
|
||
>
|
||
{e.name}{" "}
|
||
</p>
|
||
))}
|
||
</div>
|
||
|
||
<div className="bg-red-600 mb-4 px-4 rounded-full">
|
||
<p className="mb-0 text-white">بمب امروز </p>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className="flex justify-center "
|
||
onMouseEnter={() => setNavItemHover(navItemHover)}
|
||
onMouseLeave={() => setNavItemHover(null)}
|
||
>
|
||
<div
|
||
className={` w-3/4 mr-0 z-50 ${
|
||
isScrolled ? "fixed top-10 mt-[29px]" : "relative top-[-3px]"
|
||
} `}
|
||
>
|
||
<div
|
||
className={`flex ${
|
||
navItemHover != null ? " opacity-100" : "hidden opacity-0"
|
||
}`}
|
||
>
|
||
<div className="w-[60px] absolute left-0 rotate-180 ml-[-60px] mt-[-15px] ">
|
||
<Image src={divider} />
|
||
</div>
|
||
|
||
<div
|
||
className={`block absolute w-full bg-gray-100 bottom-[-435px] h-[450px] p-4 rounded-b-2xl tr03 z-50 over`}
|
||
>
|
||
<div className="flex rtl">
|
||
<div className=" mx-2 p-5 w-full ">
|
||
<ul className="flex flex-col flex-wrap max-h-96 list-none ">
|
||
{navItemHover != null &&
|
||
dataNav &&
|
||
dataNav[navItemHover].children.map((e) => (
|
||
<li className=" my-2">
|
||
<div className="flex">
|
||
<div className="w-[10px] h-[10px] rounded-full bg-primary-500 mt-1 mx-2"></div>
|
||
<Link href={`/categories/${e.id}`}>
|
||
<p className="mb-0 font-bold text-sm hover:text-primary-500 tr03 cursor-pointer">
|
||
{e.name}
|
||
</p>
|
||
</Link>
|
||
|
||
{e.children.length > 0 && (
|
||
<div>
|
||
<svg
|
||
width="10"
|
||
height="10"
|
||
viewBox="0 0 923 1697"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-1 mt-[3px]"
|
||
>
|
||
<path
|
||
d="M714 209L209.293 848.115L714 1487.23"
|
||
stroke="blue"
|
||
stroke-width="200"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* ======hear==== */}
|
||
{e.children && e.children.length > 0 && (
|
||
<div>
|
||
{e.children.map((child) => (
|
||
<Link href={`/categories/${child.id}`}>
|
||
<p
|
||
key={child.id}
|
||
className="mb-0 mt-2 text-[14px] mr-2 hover:bg-primary-400 hover:text-white w-fit rounded-full px-2 tr03 cursor-pointer"
|
||
>
|
||
{child.name}
|
||
</p>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<div className=" mx-2 p-5 w-10/12">
|
||
<div className=" mx-2 h-[300px] w-full bg-red-900 rounded-[60px] overflow-hidden relative border-[3px] border-gray-50">
|
||
<div className="absolute">
|
||
<Image
|
||
src={cover}
|
||
className="h-[300px] object-cover brightness-50"
|
||
/>
|
||
</div>
|
||
|
||
<div className=" mt-[90px] relative">
|
||
<div className="flex justify-center">
|
||
<div className="w-[50px] h-[50px] rounded-full bg-white mt-5 ">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 356 357"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto mt-4 mr-3 opacity-30"
|
||
>
|
||
<path
|
||
d="M0 1.17188L1.17509 356.17L354.586 177.499L0 1.17188Z"
|
||
fill="black"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<p className="mb-0 w-full text-white bg-navbar mt-3 text-center">
|
||
چرا آرایشی وسمه ؟
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="w-[60px] absolute right-0 rotate-90 mr-[-60px] mt-[-15px] ">
|
||
<Image src={divider} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{!isDesktop && (
|
||
<>
|
||
<div
|
||
className={` flex justify-between rtl z-[50] rounded-bl-3xl ${
|
||
isScrolled
|
||
? " !fixed top-0 w-full bg-gray-100 p-5"
|
||
: " relative px-5 pt-5 "
|
||
} `}
|
||
>
|
||
{" "}
|
||
<div className="w-[70px] mt-[6px] z-10 ">
|
||
{isScrolled ? (
|
||
<Image src={theme == 0 ? logoBlack : logoBlack} />
|
||
) : (
|
||
<Image src={theme == 0 ? logoWhite : logoBlack} />
|
||
)}
|
||
</div>
|
||
<div className="flex">
|
||
<div className="flex">
|
||
{profile?.length <= 0 ? (
|
||
<div className="flex">
|
||
<Link href={"/login"}>
|
||
<div className="bg-gray-100 py-2 px-3 rounded-xl text-sm ">
|
||
ورود / عضویت{" "}
|
||
</div>
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<div className="flex">
|
||
<div>
|
||
<div
|
||
className="bg-gray-100 py-2 px-3 rounded-xl text-sm flex cursor-pointer "
|
||
onClick={() => setSmallDashboard(!smallDashboard)}
|
||
>
|
||
<p className="mb-0">
|
||
{profile?.firstName} {profile?.lastName}
|
||
</p>{" "}
|
||
</div>
|
||
|
||
{smallDashboard && (
|
||
<div
|
||
className={`relative !z-[100] tr03 ${
|
||
smallDashboard ? "opacity-100" : "opacity-0"
|
||
} `}
|
||
onMouseEnter={() => setSmallDashboard(true)}
|
||
onMouseLeave={() => setSmallDashboard(false)}
|
||
>
|
||
<div className="absolute w-[270px] bg-gray-100 rounded-xl mt-2 mr-[-87px] overflow-hidden">
|
||
<div>
|
||
<ul className="p-2 ">
|
||
<li className="group cursor-pointer">
|
||
<Link href={"/profile"}>
|
||
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||
داشبورد
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||
</div>
|
||
</Link>
|
||
</li>
|
||
|
||
<li className="group cursor-pointer">
|
||
<Link href={"/profile/orders"}>
|
||
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||
پیگیری سفارش
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||
</div>
|
||
</Link>
|
||
</li>
|
||
|
||
<li className="group cursor-pointer">
|
||
<Link href={"/profile/address"}>
|
||
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||
آدرس ها{" "}
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||
</div>
|
||
</Link>
|
||
</li>
|
||
|
||
<li
|
||
className="flex justify-between p-2 rounded-full group hover:bg-red-200 tr03 cursor-pointer"
|
||
onClick={() =>
|
||
CTX.setBottomSheetLogOutOpen(true)
|
||
}
|
||
>
|
||
<p className="mb-0 text-sm text-red-500 group-hover: ">
|
||
خروج{" "}
|
||
</p>
|
||
<div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div
|
||
className="mx-2 mt-2"
|
||
onClick={() => CTX.setBottomSheetCartOpen(true)}
|
||
>
|
||
<div className="absolute mt-[-16px] mr-[6px] ">
|
||
{cart?.length > 0 && (
|
||
<div className="">
|
||
<PersianNumber
|
||
number={cart?.length}
|
||
style={`!text-[10px] text-primary-900 font-bold ${
|
||
theme == 1
|
||
? "text-primary-500"
|
||
: isScrolled
|
||
? "text-primary-500"
|
||
: "text-white"
|
||
}`}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 248 232"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="opacity-80"
|
||
>
|
||
<path
|
||
d="M18.4371 138.212C9.46208 96.3 4.96208 75.3375 16.2246 61.425C27.4746 47.5 48.9121 47.5 91.7746 47.5H156.225C199.1 47.5 220.512 47.5 231.775 61.425C243.025 75.35 238.537 96.3 229.562 138.212L224.2 163.212C218.112 191.625 215.075 205.825 204.762 214.163C194.45 222.5 179.925 222.5 150.875 222.5H97.1246C68.0746 222.5 53.5496 222.5 43.2496 214.163C32.9246 205.825 29.8746 191.625 23.7996 163.212L18.4371 138.212Z"
|
||
stroke={
|
||
isScrolled ? "black" : theme == 1 ? "black" : "white"
|
||
}
|
||
stroke-width="18.75"
|
||
/>
|
||
<path
|
||
opacity="0.6"
|
||
d="M199 85L161.5 10M49 85L86.5 10"
|
||
stroke={
|
||
isScrolled ? "black" : theme == 1 ? "black" : "white"
|
||
}
|
||
stroke-width="18.75"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<SearchSideBar />
|
||
<BottomSheetCart />
|
||
</>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Navbar;
|