100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import { useState } from "react";
|
|
import { Link, NavLink, useLocation } from "react-router-dom";
|
|
|
|
const MenuIcon = () => (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
x="0px"
|
|
y="0px"
|
|
width="50"
|
|
height="50"
|
|
viewBox="0 0 50 50"
|
|
style={{ fill: "#C2C2CA" }}
|
|
>
|
|
<path d="M 2 9 L 2 11 L 48 11 L 48 9 L 2 9 z M 2 24 L 2 26 L 48 26 L 48 24 L 2 24 z M 2 39 L 2 41 L 48 41 L 48 39 L 2 39 z"></path>
|
|
</svg>
|
|
);
|
|
const CloseIcon = () => (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
x="0px"
|
|
y="0px"
|
|
width="50"
|
|
height="50"
|
|
viewBox="0 0 50 50"
|
|
style={{ fill: "#C2C2CA" }}
|
|
>
|
|
<path d="M 7.71875 6.28125 L 6.28125 7.71875 L 23.5625 25 L 6.28125 42.28125 L 7.71875 43.71875 L 25 26.4375 L 42.28125 43.71875 L 43.71875 42.28125 L 26.4375 25 L 43.71875 7.71875 L 42.28125 6.28125 L 25 23.5625 Z"></path>
|
|
</svg>
|
|
);
|
|
|
|
const Navbar = () => {
|
|
const location = useLocation();
|
|
const [isNavbarOpened, setIsNavbarOpened] = useState(false);
|
|
|
|
const showNavbar = () => {
|
|
setIsNavbarOpened(!isNavbarOpened);
|
|
};
|
|
const links = [
|
|
{
|
|
href: "/",
|
|
label: "Amirmoghi3",
|
|
isActive: location.pathname === "/",
|
|
},
|
|
{
|
|
href: "/resume",
|
|
label: "Who I Am",
|
|
isActive: location.pathname === "/resume",
|
|
},
|
|
];
|
|
return (
|
|
<div className="p-5">
|
|
<nav className="flex justify-between flex-wrap items-start">
|
|
<div className="hidden md:flex">
|
|
{links.map(({ href, label, isActive }) => (
|
|
<NavLink
|
|
className={`${
|
|
isActive ? "border-secondary" : "border-light-primary"
|
|
} mx-2 text-secondary border-2 hover:border-secondary p-2`}
|
|
to={href}
|
|
key={href}
|
|
>
|
|
{label}
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-col md:hidden w-full">
|
|
<div className="flex flex-row justify-between">
|
|
<button onClick={showNavbar}>
|
|
{isNavbarOpened ? <CloseIcon /> : <MenuIcon />}
|
|
</button>
|
|
<div className="border-b-2 border-b-secondary p-2">
|
|
<Link to={links[0].href}>
|
|
<a className="text-secondary text-sm md:text-xl">
|
|
{links[0].label}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col border-secondary ">
|
|
{isNavbarOpened &&
|
|
links.slice(1).map(({ href, label, isActive }) => (
|
|
<Link to={href} key={href}>
|
|
<a
|
|
className={`${
|
|
isActive ? "border-secondary" : "border-light-primary"
|
|
} my-2 text-secondary border-2 hover:border-secondary p-2`}
|
|
>
|
|
{label}
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|