126 lines
4.2 KiB
TypeScript
126 lines
4.2 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useEffect } from "react";
|
|
import DownloadIcon from "../icons/DownloadIcon";
|
|
import useFavoritesStore from "../../store/useFavoritesStore";
|
|
|
|
function NavbarModal() {
|
|
const { favoriteUnits } = useFavoritesStore();
|
|
|
|
useEffect(() => {
|
|
document.body.style.overflow = "hidden";
|
|
|
|
return () => {
|
|
document.body.style.overflow = "auto";
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="fixed top-[56px] left-0 w-full h-[calc(100dvh-56px)] bg-[#F3F3F2] z-[99999999] sm:p-4 p-3 space-y-4 overflow-y-auto">
|
|
<div className="grid sm:grid-cols-2 gap-2 border-b border-[#E2E2DC] pb-4">
|
|
<div className="flex flex-col gap-2">
|
|
<a
|
|
href="/masterplan"
|
|
className="p-4 bg-white rounded-lg text-[#0D1922]"
|
|
>
|
|
Map
|
|
</a>
|
|
<a
|
|
href="/unit-types"
|
|
className="p-4 bg-white rounded-lg text-[#0D1922]"
|
|
>
|
|
Unit Types
|
|
</a>
|
|
<a href="/about" className="p-4 bg-white rounded-lg text-[#0D1922]">
|
|
About IRTH
|
|
</a>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<a
|
|
href="/favorites"
|
|
className="p-4 bg-white rounded-lg text-[#0D1922] "
|
|
>
|
|
<div className="relative w-fit">
|
|
Favorites
|
|
{favoriteUnits.length > 0 && (
|
|
<div className="absolute -right-[18px] -top-1 w-4 h-4 bg-[#00BED7] rounded-full flex items-center justify-center">
|
|
<p className="text-white text-[10px] font-mono font-semibold -ml-[0.5px]">
|
|
{favoriteUnits.length}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</a>
|
|
<a href="/search" className="p-4 bg-white rounded-lg text-[#0D1922]">
|
|
Search
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<p className="font-semibold text-[#0D1922]">Brochures</p>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-3">
|
|
<p className="text-sm text-[#0D1922]">Rove Home Marasi Drive</p>
|
|
<div className="flex flex-col gap-2">
|
|
<a
|
|
href="#"
|
|
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
|
download
|
|
>
|
|
<p>Rove Main Brochure</p>
|
|
<DownloadIcon />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
|
download
|
|
>
|
|
<p>Rove Amenties Brochure</p>
|
|
<DownloadIcon />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
|
download
|
|
>
|
|
<p>Rove Technical Brochure</p>
|
|
<DownloadIcon />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<p className="text-sm text-[#0D1922]">Rove Home Downtown</p>
|
|
<div className="flex flex-col gap-2">
|
|
<a
|
|
href="#"
|
|
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
|
download
|
|
>
|
|
<p>Rove Main Brochure</p>
|
|
<DownloadIcon />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
|
download
|
|
>
|
|
<p>Rove Amenties Brochure</p>
|
|
<DownloadIcon />
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
|
|
download
|
|
>
|
|
<p>Rove Technical Brochure</p>
|
|
<DownloadIcon />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default NavbarModal;
|