104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
"use client";
|
|
import React, {useEffect, useState} from "react";
|
|
import Menu from "../menu/Menu";
|
|
import {DefaultMenuLinks, Menu_buttons} from "@/constants/menu/menu.const";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import CustomLink from "../global/CustomLink";
|
|
import {languages_types} from "@/types";
|
|
import MobileMenu from "../menu/MobileMenu";
|
|
import {getHref} from "@/utils/functions";
|
|
|
|
export default function TopMenu({lang}: {lang: string}) {
|
|
const [isSticky, setIsSticky] = useState(false);
|
|
|
|
useEffect(() => {
|
|
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 z-50 transition-all duration-300 container flex lg:justify-around justify-between items-center
|
|
${
|
|
isSticky
|
|
? "h-[80px] lg:fixed top-0 custom-shadow backdrop-blur-3xl bg-white/80"
|
|
: "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-[210px] flex gap-x-10 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>
|
|
</div>
|
|
|
|
<MobileMenu />
|
|
<div className="lg:grid hidden grid-cols-12 gap-x-1 w-full h-full items-center">
|
|
<div className="col-span-8 flex items-center justify-center w-full h-full">
|
|
<Menu
|
|
lang={lang}
|
|
direction="horizontal"
|
|
items={DefaultMenuLinks}
|
|
/>
|
|
</div>
|
|
<div className="col-span-4 flex items-center justify-center gap-x-5">
|
|
{/* <a
|
|
href="tel:0114492"
|
|
className="text-white relative group flex items-end hover:bg-blue-primary p-3 hover:text-white transition-all rounded-xl"
|
|
>
|
|
<span className="hidden group-hover:block absolute left-3 h-[24px] w-[24px] animate-ping rounded-xl bg-white opacity-35"></span>
|
|
|
|
<span className="font-bold text-xl">
|
|
{toPersianNumber("011-4492")}
|
|
</span>
|
|
<span className="group-hover:animate-pulse">
|
|
<TelephoneSvg size="28" />
|
|
</span>
|
|
</a> */}
|
|
{/* <Dropdown options={site_languages} /> */}
|
|
|
|
<CustomLink
|
|
href={getHref("/contact-us#request_accept", lang)}
|
|
label={Menu_buttons.request_to_accept[lang as languages_types] || ""}
|
|
className={`bg-blue-primary text-white rounded-full ${
|
|
isSticky ? "py-4 px-4" : "py-4 px-6"
|
|
} text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
|
|
/>
|
|
<CustomLink
|
|
href={getHref("/upload-documents", lang)}
|
|
label={Menu_buttons.upload_document[lang as languages_types] || ""}
|
|
className={`bg-secondary text-white rounded-full ${
|
|
isSticky ? "py-4 px-4" : "py-4 px-6"
|
|
} text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|