71 lines
3 KiB
JavaScript
71 lines
3 KiB
JavaScript
import Link from "next/link";
|
|
import {useState} from "react";
|
|
import NavLink from "./NavLink";
|
|
|
|
export default function Navbar() {
|
|
const [active, setActive] = useState(false)
|
|
|
|
const handleClick = () => {
|
|
setActive(!active)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<nav className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row">
|
|
<div className="flex">
|
|
<Link href="/">
|
|
<a className="flex font-medium items-center mb-4 md:mb-0">
|
|
<span className="text-2xl font-bold duration-200">Robert S.</span>
|
|
</a>
|
|
</Link>
|
|
<button
|
|
className="inline-block md:hidden w-8 h-8 text-gray-400 focus:text-white p-1 ml-auto"
|
|
onClick={handleClick}
|
|
aria-label="Navigation menu"
|
|
>
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div
|
|
className={`${
|
|
active ? "flex" : "hidden"
|
|
} md:ml-auto md:flex flex-wrap flex-col md:flex-row md:space-x-4 items-center w-full pt-2 md:pt-0 md:w-auto text-lg justify-center font-semibold`}
|
|
>
|
|
<NavLink href="/">
|
|
<a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
|
|
Home
|
|
</a>
|
|
</NavLink>
|
|
<NavLink href="/work">
|
|
<a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
|
|
Work
|
|
</a>
|
|
</NavLink>
|
|
<NavLink href="/about">
|
|
<a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
|
|
About
|
|
</a>
|
|
</NavLink>
|
|
<NavLink href="/contact">
|
|
<a className="w-full sm:w-auto flex-none hover:text-white duration-200 text-md py-2 rounded mr-auto mr-0@m">
|
|
Contact
|
|
</a>
|
|
</NavLink>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|