49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import "./navbar.css"
|
|
import {useEffect, useState} from "react";
|
|
import * as React from "react";
|
|
import {NavLink} from "react-router";
|
|
|
|
function Navbar() {
|
|
const [current, setCurrent] = useState<string>('nav-home');
|
|
|
|
useEffect(() => {
|
|
document.getElementById(current)!.classList.add("nav-active");
|
|
}, [current]);
|
|
|
|
const setActive = (e: React.MouseEvent) => {
|
|
document.getElementById(current)!.classList.remove("nav-active");
|
|
setCurrent(e.currentTarget.id);
|
|
}
|
|
|
|
return (
|
|
<nav>
|
|
<div id={"nav-title"}>
|
|
<NavLink to="/" id={"title"}>
|
|
<h1 className={"name"}>
|
|
<span className={"first-name"}>
|
|
Quentin
|
|
</span>
|
|
<span className={"last-name"}>
|
|
Leblanc
|
|
</span>
|
|
</h1>
|
|
</NavLink>
|
|
</div>
|
|
<div id={"nav-menu"}>
|
|
<NavLink to={"/"} id={'nav-home'} className={"nav-menu-card nav-active"} onClick={setActive}>
|
|
<p>Home</p>
|
|
</NavLink>
|
|
|
|
<NavLink to={"/resume"} id={'nav-resume'} className={"nav-menu-card"} onClick={setActive}>
|
|
<p>Resume</p>
|
|
</NavLink>
|
|
|
|
<NavLink to={"/projects"} id={'nav-projects'} className={"nav-menu-card"} onClick={setActive}>
|
|
<p>Projects</p>
|
|
</NavLink>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar; |