50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { Link, useLocation } from "react-router-dom";
|
|
|
|
export default function FloatingHeader() {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<header className="floating-header">
|
|
<nav className="header-nav">
|
|
<Link
|
|
to="/"
|
|
className={`nav-link ${location.pathname === "/" ? "active" : ""}`}
|
|
>
|
|
Home
|
|
</Link>
|
|
<Link
|
|
to="/work-experience"
|
|
className={`nav-link ${location.pathname === "/work-experience" ? "active" : ""}`}
|
|
>
|
|
Work Experience
|
|
</Link>
|
|
<Link
|
|
to="/skills"
|
|
className={`nav-link ${location.pathname === "/skills" ? "active" : ""}`}
|
|
>
|
|
Skills
|
|
</Link>
|
|
<Link
|
|
to="/about"
|
|
className={`nav-link ${location.pathname === "/about" ? "active" : ""}`}
|
|
>
|
|
About Me
|
|
</Link>
|
|
<Link
|
|
to="/projects"
|
|
className={`nav-link ${location.pathname === "/projects" ? "active" : ""}`}
|
|
>
|
|
Projects and Sidequests
|
|
</Link>
|
|
<Link
|
|
to="/contact"
|
|
className={`nav-link ${location.pathname === "/contact" ? "active" : ""}`}
|
|
>
|
|
Contact
|
|
</Link>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|
|
|