97 lines
2.6 KiB
JavaScript
97 lines
2.6 KiB
JavaScript
import { Link, useLocation } from "react-router-dom";
|
|
import { useState, useEffect } from "react";
|
|
import { Divide as Hamburger } from "hamburger-react";
|
|
|
|
function Header() {
|
|
const [isOpen, setOpen] = useState(false);
|
|
|
|
const menuTimeout = 400;
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
document.body.style.overflow = isOpen ? "hidden" : "unset";
|
|
}, [isOpen]);
|
|
|
|
const menu = [
|
|
{ link: "/#about", title: ".me()" },
|
|
{ link: "/#experience", title: ".experience()" },
|
|
{ link: "/#contact", title: ".contact()" },
|
|
];
|
|
|
|
const menuUI = menu.map((item) => {
|
|
let className = "drop-shadow-light hover:drop-shadow-doublelight";
|
|
if (location.pathname === item.link) {
|
|
className += " text-white";
|
|
} else {
|
|
className += " text-white/40";
|
|
}
|
|
return (
|
|
<li className="my-10 text-xl md:my-0 md:text-base" key={item.link}>
|
|
<Link
|
|
className={className}
|
|
onClick={() => {
|
|
setOpen(false);
|
|
}}
|
|
to={item.link}
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
</li>
|
|
);
|
|
});
|
|
|
|
const headerClasses = ["sticky", "top-0", "z-40", "backdrop-blur-sm", "h-16"];
|
|
const logoClasses = ["hover:drop-shadow-light"];
|
|
const overlayMenu = [
|
|
"bg-black/90",
|
|
"z-50",
|
|
"fixed",
|
|
"left-0",
|
|
"right-0",
|
|
"top-16",
|
|
"h-screen",
|
|
"backdrop-blur-sm",
|
|
"p-2",
|
|
];
|
|
if (isOpen) {
|
|
headerClasses.push("bg-black/90");
|
|
logoClasses.push("drop-shadow-yellow");
|
|
} else {
|
|
headerClasses.push("bg-bgColor/90");
|
|
logoClasses.push("drop-shadow-doublelight");
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{isOpen && (
|
|
<div className={overlayMenu.join(" ")}>
|
|
<div className=" h-[calc(100vh-20rem)] flex flex-col justify-center">
|
|
<ul>{menuUI}</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<header className={headerClasses.join(" ")}>
|
|
<div className="container mx-auto h-full">
|
|
<nav className="flex items-center h-full px-2">
|
|
<div className="flex-none text-4xl font-black ">
|
|
<Link className={logoClasses.join(" ")} to="/#start">
|
|
MS.
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grow"></div>
|
|
<div className="flex-none hidden md:block ">
|
|
<ul className="flex flex-row gap-4 text-lg">{menuUI}</ul>
|
|
</div>
|
|
<div className="flex-none block md:hidden">
|
|
<Hamburger toggled={isOpen} toggle={setOpen} duration={0.9} />
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Header;
|