107 lines
2.7 KiB
JavaScript
107 lines
2.7 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: ".about( )" },
|
|
{ link: "/#experience", title: ".projects( )" },
|
|
{ link: "/#contact", title: ".contact( )" },
|
|
];
|
|
|
|
const menuUI = menu.map((item) => {
|
|
let className = "drop-shadow-doublelight hover:drop-shadow-active";
|
|
console.log(location);
|
|
if (`/${location.hash}` === item.link) {
|
|
className += " text-white ";
|
|
} else {
|
|
className += " text-gray-500";
|
|
}
|
|
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",
|
|
"border-b-[1px]",
|
|
"border-white",
|
|
"rounded-b-[1rem]",
|
|
];
|
|
const logoClasses = ["hover:drop-shadow-light"];
|
|
const overlayMenu = [
|
|
"bg-white/90",
|
|
"z-50",
|
|
"fixed",
|
|
"left-0",
|
|
"right-0",
|
|
"top-16",
|
|
"h-screen",
|
|
"backdrop-blur-sm",
|
|
"p-2",
|
|
];
|
|
if (isOpen) {
|
|
headerClasses.push("bg-white/70");
|
|
logoClasses.push("drop-shadow-gray");
|
|
} else {
|
|
headerClasses.push("bg-bgColor/70");
|
|
logoClasses.push("drop-shadow-active");
|
|
}
|
|
|
|
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 max-w-7xl ">
|
|
<nav className="flex items-center h-full px-10 ">
|
|
<div className="flex-none text-3xl md:text-4xl font-logo text-[#6d6d6d] ">
|
|
<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;
|