web/components/Navbar/SideBarNavBarMobile/page.jsx

79 lines
2.6 KiB
JavaScript

"use client";
import Image from "next/image";
import React, { useContext } from "react";
import logo from "../../../public/images/logo.png";
import Link from "next/link";
import AppContext from "@ctx/AppContext";
const SideBarNavBarMobile = () => {
const CTX = useContext(AppContext);
const closeNavbar = CTX.state.closeNavbar;
console.log("closeNavbar", closeNavbar);
return (
<>
<div className="sm:block lg:hidden ">
<div
className={`fixed w-[250px] top-0 right-0 z-50 tr03 ${
closeNavbar ? "" : "translate-x-full"
} `}
>
<div
className={`absolute mt-2 tr03 z-5 ${
closeNavbar ? "ml-[-34px] " : ""
}`}
>
<div
className="w-[30px] h-[30px] bg-white shadow rounded-full text-center "
onClick={
() => CTX.setCloseNavbar(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 SideBarNavBarMobile;