315 lines
12 KiB
TypeScript
315 lines
12 KiB
TypeScript
import { Link, NavLink, useLocation } from "react-router";
|
|
import LocationIcon from "./icons/LocationIcon";
|
|
import clsx from "clsx";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import Button from "./ui/Button";
|
|
import BurgerIcon from "./icons/BurgerIcon";
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
import DownloadIcon from "./icons/DownloadIcon";
|
|
import { useClickAway } from "@uidotdev/usehooks";
|
|
import CloseIcon from "./icons/CloseIcon";
|
|
import { projects } from "../data/projects";
|
|
import useModalStore from "../stores/useModalStore";
|
|
import PrivacyPolicyModal from "./modals/PrivacyPolicyModal";
|
|
import ChevronDownIcon from "./icons/ChevronDownIcon";
|
|
import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
|
|
|
|
function Header() {
|
|
function handleLogoClick() {
|
|
window.location.href = "/";
|
|
}
|
|
|
|
const [opened, setOpened] = useState(false);
|
|
|
|
const { setModal, modal } = useModalStore();
|
|
|
|
const burgerRef = useRef<HTMLButtonElement>(null);
|
|
|
|
const menuRef = useClickAway<HTMLDivElement>((e) => {
|
|
if (burgerRef.current?.contains(e.target as Node)) return;
|
|
setOpened(false);
|
|
});
|
|
|
|
const { pathname } = useLocation();
|
|
|
|
useEffect(() => setOpened(false), [pathname]);
|
|
|
|
return (
|
|
<>
|
|
<header className="sticky top-0 left-0 w-full h-14 md:max-2xl:h-16 2xl:h-[7.5vh] flex items-center justify-center bg-white ring ring-[#E2E2DC] z-2">
|
|
<div className="flex 2xl:gap-[1.111vw] gap-4 flex-1">
|
|
<div
|
|
className="2xl:px-[2.222vw] 2xl:py-[1.111vw] md:max-2xl:px-6 max-md:px-4 py-4 cursor-pointer"
|
|
onClick={handleLogoClick}
|
|
>
|
|
<img
|
|
src="/images/logo.svg"
|
|
alt="logo"
|
|
className="2xl:w-[5.972vw] w-22"
|
|
/>
|
|
</div>
|
|
<div className="flex 2xl:gap-[0.278vw] gap-1 items-center max-md:hidden">
|
|
<span className="2xl:w-[1.389vw] w-5 text-[#0D1922]/40">
|
|
<LocationIcon />
|
|
</span>
|
|
<p className="text-s text-[#0D1922]/40">Dubai</p>
|
|
</div>
|
|
</div>
|
|
<div className="max-2xl:order-2">
|
|
<nav className="flex 2xl:gap-[0.278vw] gap-1 items-center max-2xl:hidden">
|
|
<NavItem href={"/"} title={"Map"} />
|
|
<NavItem href={"/unit-types"} title={"Unit Types"} />
|
|
<NavItem href={"/about"} title={"About IRTH"} />
|
|
<NavItem href={"/favorites"} title={"Favorites"} />
|
|
<BrochuresDropdown />
|
|
<NavItem href={"/search"} title={"Search"} />
|
|
</nav>
|
|
<Button
|
|
ref={burgerRef}
|
|
onlyIcon
|
|
variant="secondary"
|
|
className="2xl:hidden !bg-[#F3F3F2] md:mr-6 mr-4"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (modal) setModal(null);
|
|
setOpened((prev) => !prev);
|
|
}}
|
|
>
|
|
<span className="w-5 h-5">
|
|
{opened ? <CloseIcon /> : <BurgerIcon />}
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
<div className="flex justify-end flex-1">{/* <ProfileBar /> */}</div>
|
|
</header>
|
|
<AnimatePresence mode="wait">
|
|
{opened && (
|
|
<>
|
|
<motion.div
|
|
ref={menuRef}
|
|
initial={{ opacity: 0, y: "-100%" }}
|
|
animate={{ opacity: 1, y: "0%" }}
|
|
exit={{ opacity: 0, y: "-100%" }}
|
|
transition={{ duration: 0.3 }}
|
|
className="2xl:hidden fixed z-1 left-0 md:top-16 top-14 md:p-4 p-3 w-full md:rounded-b-2xl flex flex-col gap-10 bg-white overflow-y-auto max-h-[calc(100dvh-56px)] pointer-events-auto ring ring-[#E2E2DC]"
|
|
>
|
|
<div className="space-y-4">
|
|
<p className="text-h3 font-medium">Projects</p>
|
|
<div className="flex gap-2 flex-wrap max-md:flex-col items-start">
|
|
{projects.map(({ img, title }, index) => {
|
|
const name = title
|
|
.split(" ")
|
|
.slice(-2)
|
|
.join("-")
|
|
.toLowerCase();
|
|
|
|
return (
|
|
<Link
|
|
key={index}
|
|
to={`/complex/${name}`}
|
|
className={clsx(
|
|
"p-1 pr-5 flex gap-2 items-center flex-nowrap ring rounded-[40px]",
|
|
pathname.endsWith(name)
|
|
? "ring-[#00BED7] text-[#00BED7]"
|
|
: "ring-[#E2E2DC] text-[#0D1922]/70"
|
|
)}
|
|
>
|
|
<img src={img} alt={title} className="w-10 h-10" />
|
|
<span className="text-s">{title}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
<Link
|
|
to="/"
|
|
className={clsx(
|
|
"px-5 py-3.5 content-center ring rounded-[40px] text-s text-[#0D1922]/70",
|
|
pathname === "/"
|
|
? "ring-[#00BED7] text-[#00BED7]"
|
|
: "ring-[#E2E2DC]"
|
|
)}
|
|
>
|
|
Show on Map
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<nav className="grid md:grid-cols-2 md:gap-4 gap-2">
|
|
<NavItem href={"/unit-types"} title={"Unit Types"} />
|
|
<NavItem href={"/about"} title={"About IRTH"} />
|
|
<NavItem href={"/favorites"} title={"Favorites"} />
|
|
<NavItem href={"/search"} title={"Search"} />
|
|
</nav>
|
|
<hr className="border-[#E2E2DC]" />
|
|
<div className="space-y-6">
|
|
<p className="font-medium text-h3">Brochures</p>
|
|
<div className="p-[0.278vw] flex md:gap-[1.111vw] gap-6 justify-stretch items-stretch max-md:flex-col">
|
|
<div className="flex-1 space-y-4">
|
|
<p className="text-s font-medium">Rove Home Marasi Drive</p>
|
|
<div className="flex gap-2 flex-col">
|
|
{[
|
|
"Rove Main Brochure",
|
|
"Rove Amenties Brochure",
|
|
"Rove Technical Brochure",
|
|
].map((title) => (
|
|
<BrochureButton title={title} key={title} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 space-y-4">
|
|
<p className="text-s font-medium">Rove Home Downtown</p>
|
|
<div className="flex gap-2 flex-col">
|
|
{[
|
|
"Rove Main Brochure",
|
|
"Rove Amenties Brochure",
|
|
"Rove Technical Brochure",
|
|
].map((title) => (
|
|
<BrochureButton title={title} key={title} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="pt-6 p-4 flex justify-between items-end bottom-0 left-0 w-full bg-white">
|
|
<p className="text-s text-[#0D1922]/40 w-fit">
|
|
For more information, visit our
|
|
<br />
|
|
website:{" "}
|
|
<Link
|
|
to="https://www.irth.ae"
|
|
className="underline text-[#00BED7]"
|
|
>
|
|
www.irth.ae
|
|
</Link>
|
|
</p>
|
|
<Button
|
|
variant="tertiary"
|
|
size="small"
|
|
onClick={() => setModal(<PrivacyPolicyModal />)}
|
|
>
|
|
<span className="text-btn-s">Privacy Policy</span>
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
<div className="fixed inset-0" />
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Header;
|
|
|
|
function NavItem({ href, title }: { href: string; title: string }) {
|
|
const { favoriteUnits } = useFavoritesUnitsStore();
|
|
|
|
return (
|
|
<NavLink
|
|
to={href}
|
|
className={({ isActive }) =>
|
|
clsx(
|
|
"text-btn-m 2xl:px-[1.25vw] 2xl:py-[0.903vw] p-4 2xl:rounded-[0.833vw] rounded-xl transition-colors duration-300 !leading-none max-2xl:text-center max-2xl:bg-[#F3F3F2] relative",
|
|
isActive &&
|
|
"!bg-[#00BED7] text-[#FFFFFF] [&_>div]:bg-white [&_>div]:text-[#00BED7]"
|
|
)
|
|
}
|
|
>
|
|
{title}
|
|
{title === "Favorites" && !!favoriteUnits.length && (
|
|
<div className="absolute 2xl:top-1.5 2xl:right-1.5 top-1.5 right-1.5 rounded-full min-w-5 min-h-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s text-center font-mono">
|
|
{favoriteUnits.length}
|
|
</div>
|
|
)}
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
// function ProfileBar() {
|
|
// return (
|
|
// <Button
|
|
// variant="secondary"
|
|
// className="2xl:mr-[2.222vw] mr-4 text-[#0D1922]/70 !bg-[#F3F3F2]"
|
|
// >
|
|
// Login
|
|
// </Button>
|
|
// );
|
|
// }
|
|
|
|
function BrochuresDropdown() {
|
|
const [opened, setOpened] = useState(false);
|
|
|
|
const ref = useClickAway<HTMLDivElement>(() => setOpened(false));
|
|
|
|
return (
|
|
<div ref={ref}>
|
|
<Button
|
|
variant="secondary"
|
|
className="2xl:px-[0.972vw] 2xl:py-[0.694vw] px-3.5 py-2.5 flex items-center max-2xl:hidden"
|
|
onClick={() => setOpened((prev) => !prev)}
|
|
>
|
|
<span className="text-btn-m text-[#0D1922]">Brochures</span>
|
|
<span
|
|
className={clsx(
|
|
"2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 transition-transform duration-300",
|
|
opened && "rotate-180"
|
|
)}
|
|
>
|
|
<ChevronDownIcon />
|
|
</span>
|
|
</Button>
|
|
<AnimatePresence>
|
|
{opened && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ bounce: 0, duration: 0.3 }}
|
|
className="max-2xl:hidden p-[1.667vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[44.028vw] w-[32.222vw] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
|
|
>
|
|
<div className="flex-1 space-y-4">
|
|
<p className="text-s font-medium">Rove Home Marasi Drive</p>
|
|
<div className="flex flex-col gap-[0.556vw]">
|
|
{[
|
|
"Rove Main Brochure",
|
|
"Rove Amenties Brochure",
|
|
"Rove Technical Brochure",
|
|
].map((title) => (
|
|
<BrochureButton title={title} key={title} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 space-y-4">
|
|
<p className="text-s font-medium">Rove Home Downtown</p>
|
|
<div className="flex flex-col gap-[0.556vw]">
|
|
{[
|
|
"Rove Main Brochure",
|
|
"Rove Amenties Brochure",
|
|
"Rove Technical Brochure",
|
|
].map((title) => (
|
|
<BrochureButton title={title} key={title} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function BrochureButton({ title }: { title: string }) {
|
|
return (
|
|
<Button
|
|
variant="secondary"
|
|
size="large"
|
|
className="w-full !bg-[#F3F3F2] !justify-between group hover:!bg-[#F3F3F2]"
|
|
>
|
|
<span className="text-nowrap text-caption-m group-hover:text-[#0D1922] transition-colors duration-300">
|
|
{title}
|
|
</span>
|
|
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70 group-hover:text-[#0D1922] transition-colors duration-300">
|
|
<DownloadIcon />
|
|
</span>
|
|
</Button>
|
|
);
|
|
}
|