%PDF-
%PDF-
Mini Shell
Mini Shell
import { useEffect, useState } from "react";
import React from "react";
import parse from "html-react-parser";
import { useRouter } from "next/router";
import Image from "next/image";
import Link from "next/link";
import { ArrowsRightWhite, CloseSvg } from "./Icons";
import { BorderLine } from "./Backgrounds";
import { useGlobalContext } from "./store/context/GlobalContext";
function Menu({ closeMenu }) {
const [currentSlug, setCurrentSlug] = useState("");
const [buggyRent, setBuggyRent] = useState("");
const { menu } = useGlobalContext();
const router = useRouter();
useEffect(() => {
let slug = router.pathname;
setCurrentSlug(slug);
}, []);
const showScroll = () => {
let html = document.querySelector("html");
html.classList.remove("overflowHidden");
};
return (
<div className="mainMenu">
<div className="myMenu">
<div className="tours">
<div className="buttons">
<h1>Tours</h1>
<div className="menuItems">
<div className="routes">
{menu?.menu?.slice(0, 1).map((item, index) => (
<Link href="/" key={index}>
<a
style={{
display: currentSlug === "/" ? "none" : "inline-block",
}}
onClick={() => {
showScroll();
closeMenu();
}}
>
{item?.title}
</a>
</Link>
))}
{menu?.menu?.slice(1).map((item, index) => (
<Link href={`/${item.slug}`} key={index}>
<a
onClick={() => {
showScroll();
closeMenu();
}}
>
{item?.title}
</a>
</Link>
))}
</div>
<div
className="close"
onClick={() => {
closeMenu();
showScroll();
}}
>
<span>Close</span>
<div className="closeSvg">
<CloseSvg />
</div>
</div>
</div>
</div>
<div className="bookAtv">
{menu?.header?.tours?.map((tour, index) => {
return (
<div key={index} className="card">
<div className="imgDiv">
<Image
src={tour?.image}
alt=""
width={202}
height={202}
// objectFit="contain"
/>
</div>
<div className="content">
<h4>{tour?.title}</h4>
<div className="bookNow">
<div className="price">
<span>{tour?.single_price_label}</span>
<h3>{parse(tour?.price)}</h3>
<span>{tour?.double_price_label}</span>
<h3>{parse(tour?.double_price)}</h3>
</div>
<div
className="click"
onClick={() => {
closeMenu();
showScroll();
router
.push(`/tours/${tour.slug}`)
.then(() => router.reload());
}}
>
<div className="arrows">
<ArrowsRightWhite />
</div>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
<div className="rent">
<h1>Rent</h1>
<div className="buggies">
{menu?.header?.rents.map((rent, index) => (
<React.Fragment key={index}>
<div
className="buggyCard"
onMouseEnter={() => {
setBuggyRent("outl");
}}
onMouseLeave={() => {
setBuggyRent("");
}}
>
<div className="buggyImg">
<Image
src={rent?.image}
alt=""
// layout="responsive"
width={227}
height={227}
objectFit="contain"
/>
</div>
<div className="specs">
<div className="specImg">
<Image
src={rent?.brandImageBlack}
alt=""
layout="responsive"
width={78}
height={10}
objectFit="contain"
/>
</div>
<>{parse(rent?.title)}</>
</div>
<div
className="rentBtn"
style={{ display: buggyRent === "outl" ? "block" : "none" }}
onClick={() => {
closeMenu();
showScroll();
}}
>
<button
onClick={() =>
router
.push(`/rent/${rent.slug}`)
.then(() => router.reload())
}
>
View More
</button>
</div>
</div>
<div className="border">
<BorderLine />
</div>
</React.Fragment>
))}
</div>
</div>
</div>
</div>
);
}
export default Menu;
Zerion Mini Shell 1.0