491 lines
21 KiB
JavaScript
491 lines
21 KiB
JavaScript
"use client";
|
|
import React, { 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 CardCategoriesMobile from "@comp/Cards/CardCategoriesMobile/page";
|
|
|
|
const Navbar = ({ theme, dataNav }) => {
|
|
console.log(dataNav);
|
|
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 [smallBasket, setSmallBasket] = 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"
|
|
} `}
|
|
>
|
|
<Image src={theme == 0 ? logoWhite : logoBlack} />
|
|
</div>
|
|
|
|
<div className="flex rtl py-5 ">
|
|
{2 == 2 ? (
|
|
<div className="flex">
|
|
<div className="bg-white py-2 px-5 rounded-xl text-sm ">
|
|
ورود / عضویت{" "}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex">
|
|
<div>
|
|
<div
|
|
className="bg-white py-2 px-5 rounded-xl text-sm flex cursor-pointer "
|
|
onClick={() => setSmallDashboard(!smallDashboard)}
|
|
>
|
|
<p className="mb-0">حسین معصومی پور</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-white rounded-xl mt-2 mr-[-87px] overflow-hidden">
|
|
<div>
|
|
<ul className="p-2 ">
|
|
<li className="group cursor-pointer">
|
|
<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>
|
|
</li>
|
|
|
|
<li className="group cursor-pointer">
|
|
<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>
|
|
</li>
|
|
|
|
<li className="group cursor-pointer">
|
|
<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>
|
|
</li>
|
|
|
|
<li className="group cursor-pointer">
|
|
<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>
|
|
</li>
|
|
|
|
<li className="flex justify-between p-2 rounded-full group hover:bg-red-200 tr03 cursor-pointer">
|
|
<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 className="mr-2">
|
|
<div
|
|
className="bg-secondary-600 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
|
|
onMouseEnter={() => setSmallBasket(true)}
|
|
onClick={() => setSmallBasket(false)}
|
|
>
|
|
<p className="mb-0 text-white">سبد خرید</p>
|
|
</div>
|
|
|
|
{smallBasket && (
|
|
<div
|
|
className={`relative !z-[100] tr03 ${
|
|
smallBasket ? "opacity-100" : "opacity-0"
|
|
} `}
|
|
onMouseEnter={() => setSmallBasket(true)}
|
|
onMouseLeave={() => setSmallBasket(false)}
|
|
>
|
|
<div className="absolute w-[400px] bg-white rounded-xl mt-2 max-h-[450px] overflow-auto mr-[-310px] scroll-1">
|
|
<div className="text-center p-3">
|
|
<p className="mb-0 text-sm pb-3">
|
|
<PersianNumber
|
|
number={5}
|
|
style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
|
|
/>
|
|
محصول موجود در سبد
|
|
</p>
|
|
|
|
{/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
|
|
<div>
|
|
<CardCategoriesMobile />
|
|
<CardCategoriesMobile />
|
|
<CardCategoriesMobile />
|
|
<CardCategoriesMobile />
|
|
<CardCategoriesMobile />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full p-3 ">
|
|
<div className="">
|
|
<p className="mb-0 text-sm p-3">
|
|
جمع کل :
|
|
<PersianNumber
|
|
number={2546385}
|
|
style="text-lg mr-2 font-bold text-gray-500"
|
|
/>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</p>
|
|
</div>
|
|
<button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
|
|
{" "}
|
|
ثبت خرید
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-20">
|
|
<div
|
|
className={`w-full h-[1px] mt-4 relative top-[-17px] rounded-full overflow-hidden opacity-10 ${
|
|
theme == 0 ? "bg-gray-300" : "bg-gray-700"
|
|
} `}
|
|
></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-white"}`}
|
|
>
|
|
<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-white 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>
|
|
<p className="mb-0 font-bold text-sm hover:text-primary-500 tr03 cursor-pointer">
|
|
{e.name}
|
|
</p>
|
|
|
|
{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) => (
|
|
<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>
|
|
))}
|
|
</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={` p-5 flex justify-between rtl z-[50] ${
|
|
isScrolled ? " !fixed top-0 w-full bg-white " : " relative "
|
|
} `}
|
|
>
|
|
{" "}
|
|
<div className="w-[90px] z-10 ">
|
|
<Image src={theme == 0 ? logoWhite : logoBlack} />
|
|
</div>
|
|
<div onClick={() => setClosNavbar(true)}>
|
|
<svg
|
|
width="20"
|
|
height="30"
|
|
viewBox="0 0 144 217"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M58.047 184.449C57.9469 180.136 56.5336 175.951 53.9858 172.422C51.4379 168.893 47.8699 166.179 43.7331 164.624C39.5962 163.069 35.0762 162.741 30.7447 163.684C26.4132 164.626 22.4647 166.796 19.3985 169.918C16.3323 173.041 14.2862 176.976 13.5188 181.226C12.7515 185.476 13.2974 189.85 15.0875 193.795C16.8776 197.74 19.8316 201.079 23.5758 203.39C27.32 205.7 31.6863 206.878 36.1226 206.776"
|
|
stroke="white"
|
|
stroke-width="18.75"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M56.2765 108.128C55.9971 96.0846 45.7282 86.5546 33.3404 86.842C20.9525 87.1294 11.1366 97.1253 11.416 109.168C11.6954 121.212 21.9642 130.742 34.3521 130.454C46.74 130.167 56.5559 120.171 56.2765 108.128Z"
|
|
stroke="#BE2222"
|
|
stroke-width="18.75"
|
|
/>
|
|
<path
|
|
d="M31.5698 10.5202C36.0061 10.4173 40.3725 11.5956 44.1167 13.9061C47.8609 16.2166 50.8148 19.5556 52.605 23.5007C54.3951 27.4459 54.941 31.8201 54.1737 36.0701C53.4063 40.3202 51.3602 44.2552 48.294 47.3776C45.2278 50.5001 41.2793 52.6696 36.9478 53.612C32.6163 54.5543 28.0963 54.2271 23.9594 52.6717C19.8225 51.1163 16.2546 48.4027 13.7067 44.8738C11.1589 41.345 9.74554 37.1595 9.64549 32.8467"
|
|
stroke="white"
|
|
stroke-width="18.75"
|
|
stroke-linecap="round"
|
|
/>
|
|
<path
|
|
d="M140.956 181.409C141.186 164.842 127.942 151.226 111.375 150.996C94.8082 150.766 81.1916 164.009 80.9615 180.576C80.7314 197.143 93.9751 210.76 110.542 210.99C127.109 211.22 140.726 197.976 140.956 181.409Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M141.997 106.417C142.227 89.8497 128.983 76.233 112.416 76.0029C95.8492 75.7729 82.2326 89.0165 82.0025 105.583C81.7724 122.15 95.0161 135.767 111.583 135.997C128.15 136.227 141.767 122.984 141.997 106.417Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M143.039 31.4239C143.269 14.857 130.025 1.24031 113.458 1.01025C96.8912 0.780182 83.2746 14.0238 83.0445 30.5908C82.8144 47.1577 96.0581 60.7744 112.625 61.0045C129.192 61.2345 142.809 47.9909 143.039 31.4239Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="sm:block lg:hidden ">
|
|
<div
|
|
className={`fixed w-[250px] top-0 left-0 z-50 tr03 ${
|
|
closeNavbar ? "" : "-translate-x-full"
|
|
} `}
|
|
>
|
|
<div
|
|
className={`absolute mt-2 tr03 z-5 ${
|
|
closeNavbar ? "ml-[255px] " : "ml-[-30px]"
|
|
}`}
|
|
>
|
|
<div
|
|
className="w-[30px] h-[30px] bg-white shadow rounded-full text-center "
|
|
onClick={
|
|
() => setClosNavbar(false)
|
|
// setOpenResIgType(false) &
|
|
// setResponsiveNavBarItemStep(0)
|
|
}
|
|
></div>
|
|
</div>
|
|
<div className=" bg-white h-[100vh] relative overflow-hidden tr03 shadow pt-2 ">
|
|
<div className="text-center">
|
|
<div className=" bg-dark rounded-full mx-auto ">
|
|
<div className="text-center">
|
|
<Link href="/">
|
|
<div className="text-center mt-5 ">
|
|
<Image
|
|
src={logo}
|
|
width={50}
|
|
height={50}
|
|
alt=""
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link href="/counseling">
|
|
<div className="xs:w-full md:w-fit text-center mt-4">
|
|
<button className=" btn-secondary text-sm px-7 mx-2 mt-2 ">
|
|
مشاوره رایگان
|
|
</button>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link href="/estimate">
|
|
<div className="xs:w-full md:w-fit text-center">
|
|
<button className=" btn-outline-primary text-sm px-7 mx-2 mt-2 ">
|
|
قیمت تخمین{" "}
|
|
</button>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="w-[100px] h-[1px] bg-gray-300 mx-auto mt-4 opacity-50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|