99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
import { useState } from "react";
|
|
import { FaTimes, FaBars } from "react-icons/fa";
|
|
|
|
import Logo from "../../assets/logo.svg";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
export default () => {
|
|
const [state, setState] = useState(false);
|
|
const { t } = useTranslation();
|
|
|
|
const [colorChange, setColorChange] = useState(false);
|
|
const changeColor = () => {
|
|
if (window.scrollY >= 100) {
|
|
setColorChange(true);
|
|
} else {
|
|
setColorChange(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", changeColor);
|
|
|
|
// Replace javascript:void(0) path with your path
|
|
const navigation = [
|
|
{ title: t("navbar.services"), path: "Services" },
|
|
{ title: t("navbar.advantages"), path: "Advantages" },
|
|
{ title: t("navbar.contact"), path: "Contact" },
|
|
];
|
|
|
|
const handleNavigation = (path: string) => {
|
|
const element = document.getElementById(path);
|
|
element?.scrollIntoView({ behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<nav
|
|
className={`${
|
|
colorChange
|
|
? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
|
|
: "z-10"
|
|
}`}
|
|
>
|
|
<div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
|
|
<div className="flex items-center justify-between py-3 md:py-5 md:block">
|
|
<a
|
|
href="Top"
|
|
onClick={(e) => {
|
|
e.preventDefault(); // Prevent the default anchor tag behavior
|
|
window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to the top of the page
|
|
}}
|
|
>
|
|
<img src={Logo} width={60} height={60} alt="logo" />
|
|
</a>
|
|
<div className="md:hidden">
|
|
<button
|
|
className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
|
|
onClick={() => setState(!state)}
|
|
>
|
|
{state ? (
|
|
<FaTimes className="h-6 w-6" />
|
|
) : (
|
|
<FaBars className="h-6 w-6" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`absolute top-[3.24rem] md:top-0 left-0 w-full z-50 flex flex-col items-center justify-center pb-3 mt-8 md:relative md:bg-transparent md:pb-0 md:mt-0 ${
|
|
state
|
|
? colorChange
|
|
? "block bg-black bg-opacity-80 transition duration-500"
|
|
: "block bg-gradient-to-br from-custom-bglight to-custom-bgdark"
|
|
: "hidden md:flex"
|
|
}`}
|
|
>
|
|
<ul className="text-text-gold space-y-8 md:flex md:space-x-6 md:space-y-0">
|
|
{navigation.map((item, idx) => {
|
|
return (
|
|
<li key={idx} className="hover:text-white">
|
|
<a
|
|
href={item.path}
|
|
className="block py-2 md:py-0 md:px-4 text-xl font-medium"
|
|
onClick={(e) => {
|
|
e.preventDefault(); // Prevent the default anchor tag behavior
|
|
setState(false); // Close the navigation
|
|
handleNavigation(item.path); // Navigate to the section
|
|
}}
|
|
>
|
|
{item.title}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|