53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
import { IoMenu as MenuIcon, IoClose as CloseIcon } from "react-icons/io5";
|
|
import { useState } from "react";
|
|
|
|
export const Navbar = () => {
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
|
|
return (
|
|
<nav className="lg:p-4 p-2 lg:py-10 mx-10 flex flex-row justify-between">
|
|
<Link href="/" id="logo" className="flex flex-row gap-2 items-end">
|
|
<div className="text-action font-bold text-4xl font-mono">peroxy</div>
|
|
<span className="text-secondary font-mono font-bold">dev</span>
|
|
</Link>
|
|
<div className="hidden lg:flex flex-row gap-10 items-center font-medium font-mono">
|
|
<Link href="/blog">
|
|
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
|
|
blog
|
|
</button>
|
|
</Link>
|
|
<Link href="/pidhsome">
|
|
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
|
|
projects
|
|
</button>
|
|
</Link>
|
|
<Link href="/pidhsome">
|
|
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
|
|
github
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
<div className="lg:hidden flex">
|
|
<button onClick={() => setShowMenu(true)} className="text-2xl">
|
|
<MenuIcon />
|
|
</button>
|
|
<div
|
|
className={`absolute w-96 bg-blue-900
|
|
top-0 px-10 py-6 h-screen ${showMenu ? "right-0" : "-right-full"}
|
|
transition-all ease-in duration-200`}
|
|
>
|
|
<button onClick={() => setShowMenu(false)} className="text-2xl">
|
|
<CloseIcon />
|
|
</button>
|
|
<div className="flex flex-col gap-10 mt-10 font-bold font-mono">
|
|
<div>Link 1</div>
|
|
<div>Link 1</div>
|
|
<div>Link 1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|