466 lines
19 KiB
JavaScript
466 lines
19 KiB
JavaScript
"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 AppContext from "../../Contexts/AppContext";
|
|
|
|
import logo from "@img/logo.png";
|
|
import PersianNumber from "@plugins/PersianNumber";
|
|
|
|
const NavbarTransparent = ({ theme }) => {
|
|
const router = useRouter();
|
|
const CTX = useContext(AppContext);
|
|
const cart = CTX.state.cart;
|
|
|
|
const openNavBarServices = CTX.state.openNavBarServices;
|
|
const NavBarData = CTX.state.navData;
|
|
|
|
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 (
|
|
<>
|
|
{/* <div className="bg-sky-900 p-3 flex">
|
|
<p className="mb-0 text-white"> salam</p>
|
|
</div> */}
|
|
<div
|
|
className={` max-[1023px]:hidden lg:block tr03 ${
|
|
isScrolled
|
|
? "fixed w-full !z-[1000] top-0 tr"
|
|
: "pt-10 xs:px-10 lg:px-5 xl:px-20 "
|
|
}`}
|
|
>
|
|
<nav
|
|
className={` rtl flex justify-between w-full pr-10 ${
|
|
isScrolled ? " bg-gray-100 " : " rounded-2xl"
|
|
}
|
|
${theme == 1 ? "bg-gray-100 " : " "}`}
|
|
>
|
|
<div className="w-9/12 flex ">
|
|
<div className="w-[50px] h-[50px] rounded-xl rounded-tl-[25px] bg-white mt-3">
|
|
<div className="w-[40px] mx-auto mt-1 ">
|
|
<Image
|
|
src={logo}
|
|
width={500}
|
|
height={500}
|
|
alt="حامیان عدالت"
|
|
className="mx-auto "
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{NavBarData.map((e, index) => (
|
|
<>
|
|
<div
|
|
key={index}
|
|
className={` mx-2 px-2 w-fit text-sm p-7 ${
|
|
1
|
|
? "bg-visa2-200 rounded-full !text-white text-shadow pb-1"
|
|
: ""
|
|
} `}
|
|
onMouseEnter={() => {
|
|
// setHoverItemNavbar(index);
|
|
setActiveStepNavbar(e.id);
|
|
}}
|
|
onMouseLeave={() => {
|
|
// setHoverItemNavbar(-1);
|
|
setActiveStepNavbar(null);
|
|
}}
|
|
// onClick={() => context.setOpenNavBarServices(false)}
|
|
>
|
|
<Link
|
|
href={`/categories/${e.id}/${e.name.split(" ").join("-")}`}
|
|
className={` ${isScrolled ? "text-black" : "text-white"} ${
|
|
theme == 1 ? "text-sm !text-black" : " "
|
|
}`}
|
|
>
|
|
{e.name}
|
|
{e.children.length > 0 && ""}
|
|
</Link>
|
|
|
|
{e.children.length > 0 && e.id == activeStepNavbar && (
|
|
<div
|
|
className="relative flex justify-center"
|
|
// onMouseLeave={() => {
|
|
// setHoverItemNavbar(-1);
|
|
// }}
|
|
>
|
|
<div class="absolute text-sm z-40 w-[204px] top-[17px] bg-gray-200 rounded-[26px] p-3 ">
|
|
<svg
|
|
class="absolute w-20 h-7 -top-[7px] inset-x-0 mx-auto"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 740 155.61"
|
|
>
|
|
<path
|
|
fill={`${isScrolled ? "#f3f4f6" : "#14532D "}`}
|
|
d="M532.54 85.81c69.58,-54.09 138.74,-82.63 207.46,-85.62l-740 0c73.71,3.21 147.93,35.81 222.63,97.82 28.75,23.85 45.98,38.3 83.91,49.54 20.26,6.01 41.42,8.74 63.46,8.18 28.55,0.73 55.61,-4.06 81.17,-14.35 36.28,-14.61 51.98,-32.73 81.37,-55.57z"
|
|
></path>
|
|
</svg>
|
|
<span class="absolute w-[14px] h-[14px] rounded-full block bg-gray-200 -top-[6px] inset-x-0 mx-auto"></span>
|
|
|
|
<div>
|
|
<ul>
|
|
{e.children.map((s, index) => (
|
|
<li key={index}>
|
|
<Link
|
|
href={`/categories/${s.id}/${s.name
|
|
.split(" ")
|
|
.join("-")}`}
|
|
>
|
|
<div className="flex py-2 hover:bg-sky-50 p-2 rounded-2xl cursor-pointer ">
|
|
<div className="w-3 h-3 rounded-full bg-green-900 ml-1 mt-1"></div>
|
|
<p className="mb-0 text-black text-sm ">
|
|
{s.name}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
))}
|
|
</div>
|
|
|
|
<div className="w-3/12 ltr p-4 ">
|
|
<div className="flex">
|
|
<div className=" mx-2 w-fit px-4 text-sm bg-secondary-400 p-3 rounded-2xl rounded-tl-[30px] ">
|
|
<a
|
|
href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}
|
|
className="text-sm font-medium text-black"
|
|
>
|
|
پشتیبانی سریع خرید
|
|
</a>
|
|
</div>
|
|
|
|
<div className="mr-2 w-fit px-3 text-sm bg-white rounded-xl ">
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 290 294"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mt-2 opacity-80"
|
|
>
|
|
<path
|
|
d="M145.214 175.429C171.842 175.429 193.429 153.842 193.429 127.214C193.429 100.586 171.842 79 145.214 79C118.586 79 97 100.586 97 127.214C97 153.842 118.586 175.429 145.214 175.429Z"
|
|
stroke="black"
|
|
stroke-width="21.4286"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M230.429 282.681C222.316 266.941 210.027 253.739 194.907 244.522C179.787 235.305 162.422 230.429 144.714 230.429C127.007 230.429 109.641 235.305 94.5215 244.522C79.4019 253.739 67.1122 266.941 59 282.681"
|
|
stroke="black"
|
|
stroke-width="21.4286"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M251.214 226.416C266.421 206.582 275.774 182.888 278.216 158.015C280.658 133.142 276.092 108.082 265.034 85.6691C253.975 63.2561 236.866 44.3846 215.64 31.189C194.415 17.9933 169.921 11 144.929 11C119.936 11 95.4419 17.9933 74.2168 31.189C52.9916 44.3846 35.8823 63.2561 24.8238 85.6691C13.7653 108.082 9.19884 133.142 11.641 158.015C14.0831 182.888 23.4364 206.582 38.6429 226.416"
|
|
stroke="black"
|
|
stroke-width="21.4286"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div className=" mr-2 w-fit px-3 text-sm bg-white rounded-xl ">
|
|
<Link href={"/cart"}>
|
|
<div className="flex justify-end">
|
|
<div
|
|
className={`absolute mr-[15px] ${
|
|
isScrolled ? "mt-[-9px]" : "mt-[-10px]"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`bg-primary-500 border-[1px] rounded-full text-center ${
|
|
isScrolled
|
|
? "w-[18px] h-[18px]"
|
|
: "w-[20px] h-[20px] "
|
|
}`}
|
|
>
|
|
<PersianNumber
|
|
number={cart?.length}
|
|
style={` ${
|
|
isScrolled
|
|
? "!text-[10px] relative top-[-3px]"
|
|
: "!text-sm"
|
|
}`}
|
|
/>{" "}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 123 110"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mt-2 opacity-80"
|
|
>
|
|
<path
|
|
d="M112.45 45.7875C108.794 26.2812 106.963 16.525 100.019 10.7625C93.0816 5 83.1566 5 63.3129 5H58.8066C38.9566 5 29.0379 5 22.0941 10.7625C15.1504 16.525 13.3191 26.2812 9.65664 45.7875C4.51914 73.2187 1.94414 86.9313 9.44414 95.9688C16.9379 105 30.8879 105 58.8004 105H63.3066C91.2129 105 105.169 105 112.669 95.9688C117.019 90.7188 117.982 83.9062 117.013 73.75"
|
|
stroke="black"
|
|
stroke-width="9.375"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M43.3125 30C44.6038 33.6596 46.9984 36.8285 50.1662 39.0701C53.3341 41.3116 57.1193 42.5153 61 42.5153C64.8807 42.5153 68.6659 41.3116 71.8338 39.0701C75.0016 36.8285 77.3962 33.6596 78.6875 30"
|
|
stroke="black"
|
|
stroke-width="9.375"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* reponsive navbar */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
|
|
<div
|
|
className={`sm:block lg:hidden ${
|
|
isScrolled & !closeNavbar ? "fixed top-0 z-[100] w-full" : " pt-2"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`bg-gray-100 flex justify-between rtl p-3 ${
|
|
isScrolled
|
|
? " rounded-bl-xl rounded-br-[40px]"
|
|
: "mx-2 rounded-xl rounded-br-[40px]"
|
|
}`}
|
|
>
|
|
{/* <Link href={"/"} className="w-full"> */}
|
|
<div className=" w-full mx-1 flex ">
|
|
<div className="xs:w-[40px] md:w-[100px] mt-[12px] ">
|
|
<Image
|
|
src={logo}
|
|
width={500}
|
|
height={500}
|
|
alt="حامیان عدالت"
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<h4 className="mr-2 font-bold mt-6 text-sm "> فروشگاه بونسای </h4>
|
|
</div>
|
|
{/* </Link> */}
|
|
<div
|
|
className=" p-3 w-full mx-1 text-left"
|
|
onClick={() => setClosNavbar(true)}
|
|
>
|
|
<svg
|
|
width="30"
|
|
height="30"
|
|
viewBox="0 0 235 124"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mr-auto opacity-65"
|
|
>
|
|
<path
|
|
d="M160.75 124C152.328 124 145.5 117.172 145.5 108.75V108.75C145.5 100.327 152.328 93.4995 160.75 93.4995L219.75 93.4995C228.172 93.4995 235 100.327 235 108.75V108.75C235 117.172 228.172 124 219.75 124L160.75 124ZM88.4999 26.4998C81.3202 26.4998 75.5 20.6795 75.5 13.4999V13.4999C75.5 6.32025 81.3202 0.499997 88.4999 0.499997L222 0.499997C229.18 0.499997 235 6.32025 235 13.4999V13.4999C235 20.6795 229.18 26.4998 222 26.4998L88.4999 26.4998ZM13 72.4996C6.09643 72.4996 0.499998 66.9031 0.499997 59.9996V59.9996C0.499997 53.096 6.09643 47.4996 13 47.4996L222.5 47.4996C229.404 47.4996 235 53.096 235 59.9996V59.9996C235 66.9031 229.404 72.4996 222.5 72.4996L13 72.4996Z"
|
|
fill="black"
|
|
fill-opacity="0.73"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{closeNavbar && (
|
|
<div className="absolute w-full h-screen top-0 opacity-90 z-[80]">
|
|
<div className="bg-gray-900 h-screen fixed w-full p-4 "></div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="sm:block lg:hidden ">
|
|
<div
|
|
className={`fixed w-[250px] top-0 left-0 tr03 !z-[200] ${
|
|
closeNavbar ? "" : "-translate-x-full"
|
|
} `}
|
|
>
|
|
<div
|
|
className={`absolute mt-2 tr03 z-5 ${
|
|
closeNavbar ? "ml-[255px] " : "ml-[-30px]"
|
|
}`}
|
|
>
|
|
<div
|
|
className="bg-white w-10 h-10 rounded-full pt-3"
|
|
onClick={() => setClosNavbar(false)}
|
|
>
|
|
<svg
|
|
width="13"
|
|
height="13"
|
|
viewBox="0 0 167 168"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-60"
|
|
>
|
|
<path
|
|
d="M95.5795 83.3674L164.663 14.2841C166.028 12.6899 166.741 10.6393 166.66 8.54198C166.579 6.44468 165.71 4.45519 164.226 2.97107C162.742 1.48695 160.752 0.617511 158.655 0.536501C156.558 0.455492 154.507 1.16888 152.913 2.5341L83.8295 71.6174L14.7462 2.45076C13.177 0.881567 11.0487 0 8.82953 0C6.61035 0 4.48206 0.881567 2.91286 2.45076C1.34366 4.01996 0.462098 6.14825 0.462098 8.36743C0.462098 10.5866 1.34366 12.7149 2.91286 14.2841L72.0795 83.3674L2.91286 152.451C2.04051 153.198 1.33201 154.117 0.831818 155.151C0.331624 156.185 0.050539 157.311 0.00620993 158.459C-0.0381192 159.606 0.15526 160.751 0.574214 161.82C0.993169 162.889 1.62865 163.861 2.44078 164.673C3.2529 165.485 4.22413 166.12 5.2935 166.539C6.36288 166.958 7.50732 167.152 8.65497 167.107C9.80263 167.063 10.9287 166.782 11.9626 166.282C12.9965 165.782 13.9158 165.073 14.6629 164.201L83.8295 95.1174L152.913 164.201C154.507 165.566 156.558 166.279 158.655 166.198C160.752 166.117 162.742 165.248 164.226 163.764C165.71 162.28 166.579 160.29 166.66 158.193C166.741 156.096 166.028 154.045 164.663 152.451L95.5795 83.3674Z"
|
|
fill="black"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className=" bg-white h-[100vh] !relative !overflow-auto tr03 shadow pt-2 rounded-tr-[60px] !z-90 ">
|
|
<div className="text-center">
|
|
<div className=" bg-dark rounded-full mx-auto ">
|
|
<div className="text-center">
|
|
{/* <Link href="/"> */}
|
|
<div className="text-center mt-[15px] ">
|
|
<Image
|
|
src={logo}
|
|
width={50}
|
|
height={50}
|
|
alt="فروشگاه بونسای"
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<h4 className="mt-2 font-bold"> فروشگاه بونسای</h4>
|
|
{/* </Link> */}
|
|
|
|
<div className="w-[100px] h-[1px] bg-gray-300 mx-auto mt-4 opacity-50"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-3">
|
|
<div>
|
|
{NavBarData.map((e, index) => (
|
|
<>
|
|
<motion.div
|
|
custom={index}
|
|
animate="visible"
|
|
variants={toLeft}
|
|
key={index}
|
|
>
|
|
{/* <Link href={e.url}> */}
|
|
<>
|
|
<div
|
|
className="text-center mt-2 text-sm bg-gray-100 rounded-xl shadow-sm p-2 rtl"
|
|
onClick={() => {
|
|
if (e.children.length > 0) {
|
|
setResponsiveNavBarItemStep(index);
|
|
|
|
setActiveStepNavbar(e.id);
|
|
}
|
|
}}
|
|
>
|
|
<span>
|
|
{e.name}
|
|
<small className="absolute left-0 mx-7 ">
|
|
{e.children.length > 0 ? (
|
|
<div>
|
|
<svg
|
|
width="7"
|
|
height="7"
|
|
viewBox="0 0 151 89"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mt-[6px]"
|
|
>
|
|
<path
|
|
d="M13.0444 13.1674L75.3606 75.8506L138.044 13.5345"
|
|
stroke="#424242"
|
|
stroke-opacity="0.81"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
</small>
|
|
</span>
|
|
</div>
|
|
</>
|
|
{/* </Link>{" "} */}
|
|
</motion.div>
|
|
|
|
{responsiveNavBarItemStep === index &&
|
|
e.children.length > 0 &&
|
|
e.id == activeStepNavbar && (
|
|
<div>
|
|
<div className="my-3 ">
|
|
{e.children.map((s, index) => (
|
|
// <Link href={s.url} key={index}>
|
|
<div
|
|
className="bg-primary-50 rounded-lg my-1 p-2 "
|
|
key={index}
|
|
>
|
|
<p className="mb-0 text-sm">{s.name}</p>
|
|
</div>
|
|
// </Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NavbarTransparent;
|