461 lines
17 KiB
JavaScript
461 lines
17 KiB
JavaScript
"use client";
|
|
|
|
// import { useSubscriber } from "@ctx/SubscriberContext";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Fragment, useContext, useEffect, useRef, useState } from "react";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
|
|
import logo from "../../assets/images/logo.png";
|
|
import { useLocale } from "next-intl";
|
|
import { ChevronDown } from "lucide-react";
|
|
|
|
|
|
const theme = 1;
|
|
const Navbar = ({ items }) => {
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
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 },
|
|
}),
|
|
};
|
|
const locale = useLocale()
|
|
const pathname = usePathname()
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollTop = window.scrollY;
|
|
if (pathname !== "/") {
|
|
setIsScrolled(true)
|
|
return
|
|
}
|
|
if (pathname === "/") {
|
|
setIsScrolled(scrollTop > 182);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
setIsScrolled(pathname !== "/")
|
|
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
};
|
|
}, [pathname]);
|
|
|
|
|
|
|
|
|
|
const changeLocale = () => {
|
|
const newLocale = locale === "en" ? "ar-OM" : "en";
|
|
router.push(`/${newLocale}${window.location.pathname.replace("/ar-OM", "").replace("/en", "")}`);
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
{/* <div className="bg-sky-900 p-3 flex">
|
|
<p className="mb-0 text-white"> salam</p>
|
|
</div> */}
|
|
{isScrolled && (
|
|
<div className="w-full lg:h-[76px] h-2">
|
|
|
|
</div>
|
|
)}
|
|
<div
|
|
className={` max-w-screen-xl hidden lg:block tr03 mx-auto px-4 lg:px-0 absolute top-0 left-0 right-0 z-50`}
|
|
>
|
|
{
|
|
pathname === "/" && (
|
|
<Link href={"/"} className="mx-auto w-full flex justify-center p-2">
|
|
<Image src={`/images/1.png`} width={125} height={125} className="lg:w-auto" />
|
|
</Link>
|
|
)
|
|
}
|
|
{
|
|
!isScrolled && (
|
|
<nav
|
|
className={`${locale === "en" ? "rtl pl-1" : "ltr pr-1"} flex justify-between w-full items-center ${isScrolled ? "bg-gray-200 fixed top-0 z-50 rounded-b-3xl py-2 px-2 left-1/2 -translate-x-1/2 " : "bg-transparent rounded-full"
|
|
}
|
|
}`}
|
|
>
|
|
|
|
|
|
{/* <div className={`w-full ${locale === "en" ? "rtl" : "ltr"} px-4 py-4`}>
|
|
<div className="flex">
|
|
|
|
<button onClick={changeLocale} className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
|
<p className="mb-0">{locale === "en" ? "العربیه" : "English"}</p>
|
|
</button>
|
|
|
|
</div>
|
|
</div> */}
|
|
<div className={`w-full flex p-2 mx-auto justify-center pt-8 ${locale === "en" ? "ltr" : "rtl"} `}>
|
|
|
|
|
|
|
|
{items.map((item, index) => (
|
|
|
|
<div
|
|
key={index}
|
|
className={`mx-2 px-2 w-fit text-sm rounded-full !text-white text-shadow relative group`}
|
|
onMouseEnter={() => {
|
|
// setHoverItemNavbar(index);
|
|
setActiveStepNavbar(item.documentId);
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
// setHoverItemNavbar(-1);
|
|
setActiveStepNavbar(null);
|
|
}}
|
|
// onClick={() => context.setOpenNavBarServices(false)}
|
|
>
|
|
<Link
|
|
href={`${item.link}`}
|
|
|
|
className={`text-base whitespace-nowrap py-1 px-4 inline-flex items-center gap-4 border-2 border-gray-100 p-4 text-white font-medium rounded-full group-hover:bg-black/60`}
|
|
>
|
|
{item.title}
|
|
{item.children.length > 0 && <ChevronDown size={16} />}
|
|
</Link>
|
|
|
|
{item.children.length > 0 && item.documentId == activeStepNavbar && (
|
|
<ul className="absolute left-0 w-48 bg-black/80 text-white rounded-lg shadow-lg z-50 overflow-hidden">
|
|
{
|
|
item.children.map((c, index) => (
|
|
|
|
<Link href={c.link} className="w-full h-full">
|
|
<li key={index} className="px-4 py-2 hover:bg-gray-400 cursor-pointer text-base w-full">
|
|
{c.title}
|
|
</li>
|
|
</Link>
|
|
))
|
|
}
|
|
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
|
|
{
|
|
isScrolled &&
|
|
|
|
<nav
|
|
className={`${locale === "en" ? "rtl pl-1" : "ltr pr-1"} flex justify-between w-full items-center ${isScrolled ? "bg-gray-100 border-b shadow-md fixed top-0 z-50 rounded-b-3xl py-2 px-2 left-1/2 -translate-x-1/2 " : "bg-transparent rounded-full"
|
|
}
|
|
}`}
|
|
>
|
|
|
|
{
|
|
isScrolled &&
|
|
(
|
|
<div className="relative rounded-lg flex flex-col items-center rounded-tl-2xl justify-center my-auto">
|
|
<Image
|
|
src={"/images/1.png"}
|
|
width={75} height={75}
|
|
alt="llc "
|
|
className="mx-auto object-contain"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
{/* <div className={`w-full ${locale === "en" ? "rtl" : "ltr"} px-4 py-4`}>
|
|
<div className="flex">
|
|
|
|
<button onClick={changeLocale} className="mr-2 w-fit px-3 p-2 text-sm bg-white flex rounded-xl ">
|
|
<p className="mb-0">{locale === "en" ? "العربیه" : "English"}</p>
|
|
</button>
|
|
|
|
</div>
|
|
</div> */}
|
|
<div className={`w-full flex p-2 ${locale === "en" ? "ltr" : "rtl"} `}>
|
|
|
|
|
|
|
|
{items.map((item, index) => (
|
|
|
|
<div
|
|
key={index}
|
|
className={`mx-2 px-2 w-fit text-sm bg-visa2-200 rounded-full !text-white text-shadow relative group`}
|
|
onMouseEnter={() => {
|
|
// setHoverItemNavbar(index);
|
|
setActiveStepNavbar(item.documentId);
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
// setHoverItemNavbar(-1);
|
|
setActiveStepNavbar(null);
|
|
}}
|
|
// onClick={() => context.setOpenNavBarServices(false)}
|
|
>
|
|
<Link
|
|
href={`${item.link}`}
|
|
|
|
className={`text-base whitespace-nowrap text-black py-1 px-4 inline-flex items-center gap-4 rounded-lg group-hover:bg-gray-200`}
|
|
>
|
|
{item.title}
|
|
{item.children.length > 0 && <ChevronDown size={16} />}
|
|
</Link>
|
|
|
|
{item.children.length > 0 && item.documentId == activeStepNavbar && (
|
|
<ul className="absolute left-0 w-48 bg-white text-black rounded-lg shadow-lg z-50 overflow-hidden">
|
|
{
|
|
item.children.map((c, index) => (
|
|
|
|
<Link href={c.link} className="w-full h-full">
|
|
<li key={index} className="px-4 py-2 hover:bg-gray-100 cursor-pointer text-base w-full">
|
|
{c.title}
|
|
</li>
|
|
</Link>
|
|
))
|
|
}
|
|
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
|
|
</nav>
|
|
}
|
|
|
|
</div>
|
|
|
|
{/* reponsive navbar */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
{/* responsive part */}
|
|
|
|
<div
|
|
className={`block lg:hidden ${isScrolled & !closeNavbar ? "sticky top-0 z-[100] w-full" : " pt-2 absolute left-0 right-0 top-0 z-50"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`bg-gray-100 flex justify-between items-center 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 items-center relative -mt-2 ">
|
|
{/* <button onClick={changeLocale} className="mr-2 w-fit px-3 p-2 h-fit text-sm bg-white flex rounded-xl ">
|
|
<p className="mb-0">{locale === "en" ? "العربیه" : "English"}</p>
|
|
</button> */}
|
|
<Image
|
|
src={"/images/1.png"}
|
|
width={70}
|
|
height={70}
|
|
alt="llc"
|
|
className="ml-auto object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* </Link> */}
|
|
<div
|
|
className=" 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"
|
|
fillOpacity="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] w-[150px] mx-auto ">
|
|
<Image
|
|
src={"/images/1.png"}
|
|
width={500}
|
|
height={500}
|
|
alt="llc"
|
|
className="mx-auto"
|
|
/>
|
|
</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>
|
|
{items.map((e, index) => (
|
|
<Fragment key={index}>
|
|
<motion.div
|
|
custom={index}
|
|
animate="visible"
|
|
variants={toLeft}
|
|
|
|
>
|
|
{/* <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.documentId);
|
|
} else {
|
|
setClosNavbar(false)
|
|
router.push(e.link)
|
|
}
|
|
}}
|
|
>
|
|
<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.documentId == activeStepNavbar && (
|
|
<div>
|
|
<div className="my-3 ">
|
|
{e.children.map((s, index) => (
|
|
<Link href={s.link} key={index} onClick={() => setClosNavbar(false)}>
|
|
<div
|
|
className="bg-primary-50 rounded-lg my-1 p-2 "
|
|
key={index}
|
|
>
|
|
<p className="mb-0 text-sm">{s.title}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|