116 lines
5.0 KiB
TypeScript
116 lines
5.0 KiB
TypeScript
"use client";
|
|
import React, {useEffect, useState} from "react";
|
|
import {DefaultMenuLinks} from "@/constants/menu/menu.const";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import Menu from "./Menu";
|
|
import ReservationButton from "./components/menu/ReservationButton";
|
|
import {toPersianNumber} from "@/utils/functions";
|
|
|
|
export default function TopMenu({lang}: {lang: string}) {
|
|
const [isSticky, setIsSticky] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (window.innerWidth < 1024) return;
|
|
|
|
const handleScroll = () => {
|
|
if (window.scrollY > 50) {
|
|
setIsSticky(true);
|
|
} else {
|
|
setIsSticky(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
return (
|
|
<div className="w-full shadow">
|
|
<div
|
|
className={`w-full z-30 transition-all duration-300 md:px-10 px-4 flex lg:justify-around justify-between items-center
|
|
${
|
|
isSticky
|
|
? "h-[80px] lg:fixed top-0 custom-shadow backdrop-blur-3xl bg-white/90"
|
|
: "lg:h-[120px] h-[60px] bg-white relative"
|
|
}`}
|
|
// className="bg-white container sticky top-0 z-30"
|
|
>
|
|
{/* <div className="top-0 absolute h-[40px] bg-radial bg-secondary/30 backdrop-blur-2xl w-full">
|
|
|
|
</div> */}
|
|
<div className="lg:w-[150px] flex gap-x-3 transition-all duration-300 items-center ">
|
|
{/* <Link href={"/"} className="flex items-center gap-x-2">
|
|
<div
|
|
className={`relative ${
|
|
isSticky
|
|
? " h-[70px] w-[70px]"
|
|
: "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
|
|
}`}
|
|
>
|
|
<Image
|
|
loading="lazy"
|
|
src="/shomalhospital-ipd-logo.png"
|
|
fill
|
|
alt="shomal hospital"
|
|
style={{color: "transparent", fill: "red", objectFit: "fill"}}
|
|
/>
|
|
</div>
|
|
</Link> */}
|
|
<Link href={"/"} className="flex items-center gap-x-2">
|
|
<div
|
|
className={`relative ${
|
|
isSticky
|
|
? " h-[70px] w-[70px]"
|
|
: "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
|
|
}`}
|
|
>
|
|
<Image
|
|
loading="lazy"
|
|
src={
|
|
lang === "en" ? "/main-logo-blue.png" : "/main-logo-blue.png"
|
|
}
|
|
fill
|
|
alt="shomal hospital"
|
|
style={{color: "transparent", fill: "red", objectFit: "fill"}}
|
|
/>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* <MobileMenu lang={lang} /> */}
|
|
<div className="lg:grid hidden grid-cols-12 gap-x-1 w-full h-full items-center">
|
|
<div className="col-span-9 flex items-center justify-start w-full h-full">
|
|
<Menu lang={lang} direction="horizontal" items={DefaultMenuLinks} />
|
|
</div>
|
|
<div className="col-span-3 flex items-center justify-end gap-x-5">
|
|
<ReservationButton isSticky={isSticky} />
|
|
<Link
|
|
href={"/contact-us#request_accept"}
|
|
dir="ltr"
|
|
className={`bg-blue-primary text-white rounded-full ${
|
|
isSticky ? "py-3 px-4" : "py-3 px-6"
|
|
} text-xl font-semibold shadow-lg flex flex-col justify-center items-center gap-y-1 whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
|
|
>
|
|
<div className="flex items-center gap-x-3">
|
|
<svg
|
|
stroke="currentColor"
|
|
fill="currentColor"
|
|
strokeWidth="0"
|
|
viewBox="0 0 256 256"
|
|
height="30px"
|
|
width="30px"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M144.27,45.93a8,8,0,0,1,9.8-5.66,86.22,86.22,0,0,1,61.66,61.66,8,8,0,0,1-5.66,9.8A8.23,8.23,0,0,1,208,112a8,8,0,0,1-7.73-5.94,70.35,70.35,0,0,0-50.33-50.33A8,8,0,0,1,144.27,45.93Zm-2.33,41.8c13.79,3.68,22.65,12.54,26.33,26.33A8,8,0,0,0,176,120a8.23,8.23,0,0,0,2.07-.27,8,8,0,0,0,5.66-9.8c-5.12-19.16-18.5-32.54-37.66-37.66a8,8,0,1,0-4.13,15.46Zm81.94,95.35A56.26,56.26,0,0,1,168,232C88.6,232,24,167.4,24,88A56.26,56.26,0,0,1,72.92,32.12a16,16,0,0,1,16.62,9.52l21.12,47.15,0,.12A16,16,0,0,1,109.39,104c-.18.27-.37.52-.57.77L88,129.45c7.49,15.22,23.41,31,38.83,38.51l24.34-20.71a8.12,8.12,0,0,1,.75-.56,16,16,0,0,1,15.17-1.4l.13.06,47.11,21.11A16,16,0,0,1,223.88,183.08Zm-15.88-2s-.07,0-.11,0h0l-47-21.05-24.35,20.71a8.44,8.44,0,0,1-.74.56,16,16,0,0,1-15.75,1.14c-18.73-9.05-37.4-27.58-46.46-46.11a16,16,0,0,1,1-15.7,6.13,6.13,0,0,1,.57-.77L96,95.15l-21-47a.61.61,0,0,1,0-.12A40.2,40.2,0,0,0,40,88,128.14,128.14,0,0,0,168,216,40.21,40.21,0,0,0,208,181.07Z"></path>
|
|
</svg>
|
|
{toPersianNumber("011-4492")}
|
|
</div>
|
|
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|