383 lines
15 KiB
JavaScript
383 lines
15 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";
|
|
|
|
const NavbarTransparent = () => {
|
|
const router = useRouter();
|
|
|
|
const CTX = useContext(AppContext);
|
|
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 px-20 "
|
|
} `}
|
|
>
|
|
<nav
|
|
className={`bg-white rtl flex justify-between w-full pr-20 ${
|
|
isScrolled ? " " : " rounded-2xl"
|
|
}`}
|
|
>
|
|
<div className="w-9/12 flex ">
|
|
<div className="w-[50px] mt-[10px] ">
|
|
<Image
|
|
src={logo}
|
|
width={500}
|
|
height={500}
|
|
alt="حامیان عدالت"
|
|
className="mx-auto mt-3"
|
|
/>
|
|
</div>
|
|
{NavBarData.map((e, index) => (
|
|
<>
|
|
<div
|
|
key={index}
|
|
className={` mx-2 px-4 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={e.url} className="!text-black">
|
|
{e.title}
|
|
{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="white"
|
|
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={s.url}>
|
|
<div className="flex py-2 hover:bg-sky-50 p-2 rounded-2xl cursor-pointer ">
|
|
<div className="w-3 h-3 rounded-full bg-primary-900 ml-1 mt-1"></div>
|
|
<p className="mb-0 text-black text-sm ">
|
|
{s.title}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
))}
|
|
</div>
|
|
|
|
<div className="w-3/12 ltr p-4 ">
|
|
<div className=" mx-2 w-fit px-4 text-sm bg-secondary-800 p-3 rounded-2xl">
|
|
<Link
|
|
href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}
|
|
className="!text-black font-bold"
|
|
>
|
|
پشتیبانی سریع
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* reponsive navbar */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* 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-white 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-[50px] md:w-[100px] mt-[12px] ">
|
|
<Image
|
|
src={logo}
|
|
width={500}
|
|
height={500}
|
|
alt="حامیان عدالت"
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
<h4 className="mr-2 font-bold mt-4 "> حامیان عدالت </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>
|
|
|
|
<Link href={`tel:${process.env.NEXT_PUBLIC_PHONE_NUMBER}`}>
|
|
<div className="xs:w-full md:w-fit text-center mt-4">
|
|
<div className=" bg-secondary-600 p-3 rounded-3xl text-white w-fit mx-auto text-sm px-7 mx-2 mt-2 ">
|
|
مشاوره تخصصی فوری{" "}
|
|
</div>
|
|
</div>
|
|
</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.title}
|
|
<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-100 rounded-lg my-1 p-2 ">
|
|
<p className="mb-0 text-sm">{s.title}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NavbarTransparent;
|