619 lines
27 KiB
JavaScript
619 lines
27 KiB
JavaScript
"use client";
|
||
import Image from "next/image";
|
||
import { useContext, useEffect, useState } from "react";
|
||
import cover from "../../public/images/navbar/n1.jpg";
|
||
import divider from "../../public/images/divider.png";
|
||
import logoWhite from "../../public/images/logo-white.png";
|
||
import logoBlack from "../../public/images/logo.png";
|
||
|
||
import SearchSideBar from "@comp/Category/Mobile/Component/SearchSideBar/page";
|
||
import AppContext from "@ctx/AppContext";
|
||
import Link from "next/link";
|
||
import PersianNumber from "plugins/PersianNumber";
|
||
import BottomSheetCart from "plugins/bottomSheet/BottomSheetCart";
|
||
import CartNavbar from "./CartNavbar/page";
|
||
import { debounce } from "lodash";
|
||
import { useRouter } from "next/navigation";
|
||
import ResultSearchBar from "./ResultSearchBar/page";
|
||
|
||
const Navbar = ({ theme }) => {
|
||
const [open, setOpen] = useState(false);
|
||
|
||
const CTX = useContext(AppContext);
|
||
const router = useRouter();
|
||
const dataNav = CTX.state.navData;
|
||
const profile = CTX.state.profile;
|
||
const cart = CTX.state.cart;
|
||
const searchResultCategoryData = CTX.state.searchResultData.categories;
|
||
const searchResultProductData = CTX.state.searchResultData.products;
|
||
|
||
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 [searchResultShow, setSearchResultShow] = useState(false);
|
||
const [searchValue, setSearchValue] = useState("");
|
||
|
||
const handleItemNavber = (index) => {
|
||
setNavItemHover(index);
|
||
};
|
||
|
||
const handleRemoveSearch = () => {
|
||
CTX.setSearchResultData([]);
|
||
setSearchValue("");
|
||
setSearchResultShow(false);
|
||
};
|
||
|
||
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);
|
||
};
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
// Define a function to send the request
|
||
const sendRequest = async () => {
|
||
CTX.fetchSearchResult(searchValue);
|
||
|
||
setSearchResultShow(true);
|
||
};
|
||
|
||
// Set a timer to send the request after 2000 milliseconds of inactivity
|
||
const timer = setTimeout(() => {
|
||
if (searchValue.trim() !== "") {
|
||
sendRequest();
|
||
}
|
||
}, 1000);
|
||
|
||
// Clean up function to clear the timer on component unmount or when searchTerm changes
|
||
return () => clearTimeout(timer);
|
||
}, [searchValue]);
|
||
|
||
const handleInputChange = (event) => {
|
||
setSearchValue(event.target.value);
|
||
};
|
||
|
||
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}
|
||
alt="وسمه vesmeh"
|
||
/>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className={`flex rtl py-5 `}>
|
||
<>
|
||
<div className=" px-3 ltr">
|
||
<input
|
||
type="text"
|
||
className="form-control !py-[10px] bg-gray-100 !border-[0px] border-gray-100 !rounded-2xl text-right focus:!border-[0px] !text-sm !pl-[60px] !w-[375px] "
|
||
placeholder="دستت برای جست و جو بازه"
|
||
value={searchValue}
|
||
onChange={(e) => handleInputChange(e)}
|
||
/>
|
||
|
||
{!searchResultShow ? (
|
||
<div className="absolute mt-[-36px] ml-[6px] z-90">
|
||
<div className="w-[30px] h-[30px] bg-gray-300 !rounded-xl pt-2">
|
||
<svg
|
||
width="12"
|
||
height="12"
|
||
viewBox="0 0 275 275"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto "
|
||
>
|
||
<path
|
||
d="M215.913 215.913L265 265M250.832 130.822C250.832 197.553 196.915 251.644 130.424 251.644C63.9166 251.644 10 197.552 10 130.838C10 64.0759 63.9166 10 130.408 10C196.915 10 250.832 64.0919 250.832 130.822Z"
|
||
stroke="black"
|
||
stroke-width="18.75"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="absolute mt-[-36px] ml-[6px] z-90"
|
||
onClick={() => handleRemoveSearch()}
|
||
>
|
||
<div className="w-[30px] h-[30px] bg-gray-300 !rounded-xl pt-2">
|
||
<svg
|
||
width="9"
|
||
height="9"
|
||
viewBox="0 0 214 214"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto mt-[2px] "
|
||
>
|
||
<path
|
||
d="M4.42496 8.34954L6.24996 6.24955C9.42467 3.07411 13.6335 1.1434 18.1112 0.80849C22.589 0.473578 27.0382 1.7567 30.65 4.42455L32.75 6.24955L107 80.4745L181.25 6.22455C182.98 4.43456 185.05 3.00714 187.338 2.02557C189.626 1.04399 192.087 0.527921 194.576 0.507469C197.066 0.487016 199.535 0.962591 201.839 1.90644C204.142 2.8503 206.235 4.24353 207.995 6.00484C209.755 7.76615 211.146 9.86026 212.087 12.165C213.029 14.4697 213.502 16.9389 213.48 19.4285C213.457 21.9181 212.938 24.3783 211.955 26.6654C210.971 28.9525 209.542 31.0208 207.75 32.7495L133.525 107L207.775 181.25C210.947 184.427 212.873 188.638 213.203 193.116C213.533 197.593 212.246 202.041 209.575 205.65L207.75 207.75C204.575 210.925 200.366 212.856 195.889 213.191C191.411 213.526 186.962 212.242 183.35 209.575L181.25 207.75L107 133.525L32.75 207.775C31.0195 209.565 28.9498 210.992 26.6618 211.974C24.3738 212.955 21.9132 213.471 19.4236 213.492C16.9339 213.512 14.4652 213.036 12.1613 212.093C9.85749 211.149 7.76468 209.756 6.00503 207.994C4.24538 206.233 2.85412 204.139 1.91244 201.834C0.970764 199.529 0.497518 197.06 0.520318 194.571C0.543117 192.081 1.06151 189.621 2.04524 187.334C3.02897 185.047 4.45835 182.978 6.24996 181.25L80.475 107L6.22496 32.7495C3.05326 29.5717 1.12717 25.3612 0.796856 20.8836C0.466538 16.4059 1.75392 11.9584 4.42496 8.34954Z"
|
||
fill="black"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{searchResultShow && (
|
||
<div
|
||
className={`relative !z-[100] tr03 ${
|
||
searchResultShow ? "opacity-100" : "opacity-100"
|
||
} `}
|
||
onClick={() => setSearchResultShow(!searchResultShow)}
|
||
>
|
||
<div className="absolute w-[370px] bg-gray-100 max-h-[450px] rounded-xl mr-[-385px] mt-[45px] p-5 overflow-auto scroll-1 ">
|
||
<ResultSearchBar
|
||
searchResultProductData={searchResultProductData}
|
||
searchResultCategoryData={searchResultCategoryData}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
{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 isScrolled={isScrolled} />
|
||
</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-white 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
|
||
key={index}
|
||
className={`mb-0 pt-2 pb-3 px-2 tr03 cursor-pointer ${
|
||
navItemHover == index
|
||
? " border-y-[5px] border-b-primary-800 border-t-transparent text-primary-900"
|
||
: "border-y-[5px] border-y-transparent text-black"
|
||
}
|
||
${theme == 0 ? "text-gray-400" : "text-gray-900"}
|
||
${theme == 0 && isScrolled ? "text-gray-900" : ""}`}
|
||
onMouseEnter={() => handleItemNavber(index)}
|
||
onMouseLeave={() => setNavItemHover(null)}
|
||
>
|
||
{e.name}{" "}
|
||
</p>
|
||
))}
|
||
</div>
|
||
|
||
{/* <div
|
||
onClick={() => {
|
||
const element = document.getElementById("offer");
|
||
if (element) {
|
||
const offset = -80; // Adjust this value as needed
|
||
window.scrollTo({
|
||
top: element.offsetTop + offset,
|
||
behavior: "smooth",
|
||
});
|
||
}
|
||
}}
|
||
>
|
||
<div className="bg-red-600 mb-4 px-4 mt-3 h-fit mr-2 rounded-full cursor-pointer">
|
||
<p className="mb-0 text-white">بمب امروز </p>
|
||
</div>
|
||
</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} alt="" />
|
||
</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, index) => (
|
||
<li className=" my-2" key={index}>
|
||
<div className="flex">
|
||
<div className="w-[10px] h-[10px] rounded-full bg-primary-500 mt-1 mx-2"></div>
|
||
<Link
|
||
href={`/categories/${e.id}/${e.name
|
||
.split(" ")
|
||
.join("-")}`}
|
||
>
|
||
<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, index) => (
|
||
<Link
|
||
key={index}
|
||
href={`/categories/${child.id}/${e.name
|
||
.split(" ")
|
||
.join("-")}`}
|
||
>
|
||
<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=" w-[250px] ">
|
||
<div className="absolute left-5 ">
|
||
<Image
|
||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${dataNav[navItemHover]?.mainImage}`}
|
||
className=" !w-[250px] h-[250px] rounded-xl object-cover "
|
||
width={600}
|
||
height={600}
|
||
alt={`${dataNav[navItemHover]?.name} وسمه`}
|
||
/>
|
||
</div>
|
||
|
||
{/* <div className=" mt-[90px] w-[230px] 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-primary-500 bg-primary-100 mt-3 text-center">
|
||
چرا آرایشی وسمه ؟
|
||
</p>
|
||
</div> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="w-[60px] absolute right-0 rotate-90 mr-[-60px] mt-[-15px] ">
|
||
<Image src={divider} alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{!isDesktop && (
|
||
<>
|
||
<div
|
||
className={`flex justify-between rtl z-[50] rounded-bl-3xl ${
|
||
isScrolled
|
||
? " !sticky top-0 w-full bg-gray-100 p-5"
|
||
: " relative px-5 pt-5 "
|
||
} `}
|
||
>
|
||
{" "}
|
||
<Link href={"/"}>
|
||
<div className="w-[70px] mt-[6px] z-10 ">
|
||
{isScrolled ? (
|
||
<Image
|
||
src={theme == 0 ? logoBlack : logoBlack}
|
||
alt="وسمه vesmeh"
|
||
/>
|
||
) : (
|
||
<Image
|
||
src={theme == 0 ? logoWhite : logoBlack}
|
||
alt="وسمه vesmeh"
|
||
/>
|
||
)}
|
||
</div>
|
||
</Link>
|
||
<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 "
|
||
onClick={() => CTX.setBottomSheetCartOpen(true)}
|
||
>
|
||
<div className="absolute mt-[-8px] mr-[6px] bg-white w-[15px] h-[15px] rounded-full text-center ">
|
||
{cart?.length > 0 && (
|
||
<div className="">
|
||
<PersianNumber
|
||
number={cart?.length}
|
||
style={`!text-[10px] text-primary-900 font-bold text-center relative top-[-5px] ${
|
||
theme == 1
|
||
? "text-primary-500"
|
||
: isScrolled
|
||
? "text-primary-500"
|
||
: "text-white"
|
||
}`}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div
|
||
className="bg-secondary-600 py-2 px-3 rounded-xl text-sm flex cursor-pointer "
|
||
onClick={() => CTX.setBottomSheetCartOpen(true)}
|
||
>
|
||
<p className="mb-0 text-white text-[12px]">سبد خرید</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<SearchSideBar />
|
||
<BottomSheetCart />
|
||
</>
|
||
)}
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Navbar;
|