72 lines
3.0 KiB
TypeScript
72 lines
3.0 KiB
TypeScript
import type { NextPage } from "next";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { useState } from "react";
|
|
|
|
|
|
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: NextPage = () => {
|
|
|
|
const router = useRouter();
|
|
const [isNavbarOpened, setIsNavbarOpened] = useState(false);
|
|
|
|
const showNavbar = () => {
|
|
setIsNavbarOpened(!isNavbarOpened);
|
|
}
|
|
const links = [
|
|
{
|
|
href: "/", label: "Amirmoghi3", isActive: router.pathname === "/",
|
|
},
|
|
{
|
|
href: "/resume", label: "Who I Am", isActive: router.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 }) => (
|
|
<Link href={href} key={href} >
|
|
<a className={`${isActive ? "border-secondary" : "border-light-primary"} mx-2 text-secondary border-2 hover:border-secondary p-2`}>{label}</a>
|
|
</Link>
|
|
))}
|
|
</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 href={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 href={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; |