176 lines
6.9 KiB
JavaScript
176 lines
6.9 KiB
JavaScript
"use client";
|
|
import AppContext from "@ctx/AppContext";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useContext, useState } from "react";
|
|
import logo from "../../../public/images/logo.png";
|
|
import Navbar from "../page";
|
|
import SearchSideBar from "@comp/Category/Mobile/Component/SearchSideBar/page";
|
|
import ResultSearchBar from "../ResultSearchBar/page";
|
|
|
|
const SideBarNavBarMobile = () => {
|
|
const CTX = useContext(AppContext);
|
|
const [firstChild, setFirstChild] = useState([]);
|
|
const [firstChildIndex, setFirstChildIndex] = useState(-1);
|
|
|
|
const dataNav = CTX?.state?.navData?.filter(
|
|
(item) => item.name !== "بهداشت خانه و آشپرخانه"
|
|
);
|
|
const isSearched = CTX.state.isSearched;
|
|
const searchResultCategoryData = CTX.state.searchResultData.categories;
|
|
const searchResultProductData = CTX.state.searchResultData.products;
|
|
|
|
const closeNavbar = CTX.state.closeNavbar;
|
|
|
|
return (
|
|
<>
|
|
<div className="sm:block lg:hidden ">
|
|
<div
|
|
className={`fixed w-full top-0 right-0 z-50 tr03 ${
|
|
closeNavbar ? "" : "translate-x-full"
|
|
} `}
|
|
>
|
|
<div
|
|
className={`absolute mt-2 tr03 z-50 ${closeNavbar ? " " : ""}`}
|
|
>
|
|
<div
|
|
className="rounded-full text-center m-2 "
|
|
onClick={() => {
|
|
CTX.setCloseNavbar(false);
|
|
setFirstChildIndex(-1);
|
|
}}
|
|
>
|
|
<svg
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 88 151"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70"
|
|
>
|
|
<path
|
|
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
|
stroke="black"
|
|
stroke-opacity="0.81"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className=" bg-white h-[100vh] relative tr03 shadow pt-2 overflow-auto ">
|
|
<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={60}
|
|
height={60}
|
|
alt="وسمه"
|
|
className="mx-auto"
|
|
/>
|
|
</div>
|
|
</Link>
|
|
<SearchSideBar />
|
|
<div className="w-[100px] h-[1px] bg-gray-300 mx-auto mt-4 opacity-50"></div>
|
|
|
|
{isSearched ? (
|
|
<div className="rtl p-5">
|
|
<ResultSearchBar
|
|
searchResultProductData={searchResultProductData}
|
|
searchResultCategoryData={searchResultCategoryData}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<ul className="text-right px-5">
|
|
{dataNav?.map((e, index) => (
|
|
<li
|
|
onClick={() => {
|
|
setFirstChild(dataNav[index].children);
|
|
setFirstChildIndex(index);
|
|
}}
|
|
key={index}
|
|
>
|
|
<div className="py-3 flex justify-between rtl bg-gray-50 px-1 rounded-lg my-1">
|
|
<p className="text-sm mb-0 font-bold ">
|
|
{e.name}
|
|
</p>
|
|
|
|
<div>
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 88 151"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="mx-auto opacity-70 rotate-180 mt-1"
|
|
>
|
|
<path
|
|
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
|
stroke="black"
|
|
stroke-opacity="0.81"
|
|
stroke-width="25"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{firstChildIndex == index && (
|
|
<>
|
|
<ul>
|
|
<li>
|
|
<Link
|
|
href={`/categories/${e.id}/${e.name
|
|
.split(" ")
|
|
.join("-")}`}
|
|
onClick={() => CTX.setCloseNavbar(false)}
|
|
>
|
|
<p className="mb-0 text-sm py-3 px-1 text-gray-700">
|
|
همه موارد
|
|
</p>
|
|
</Link>
|
|
</li>{" "}
|
|
{firstChild.map((e, index) => (
|
|
<li key={index}>
|
|
<Link
|
|
href={`/categories/${e.id}/${e.name
|
|
.split(" ")
|
|
.join("-")}`}
|
|
onClick={() =>
|
|
CTX.setCloseNavbar(false)
|
|
}
|
|
>
|
|
<div className="py-3 flex justify-between rtl px-1 rounded-lg my-1 text-gray-700">
|
|
<p className="mb-0 text-sm">
|
|
{e.name}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SideBarNavBarMobile;
|