76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import Link from "next/link";
|
|
import { IoMenu as MenuIcon, IoClose as CloseIcon } from "react-icons/io5";
|
|
import { useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { Logo } from "./Logo";
|
|
|
|
const links = [
|
|
{ name: "blog", href: "/blog" },
|
|
{ name: "projects", href: "/projects" },
|
|
{ name: "github", href: "https://git.peroxy.dev/kookroach" },
|
|
];
|
|
export const Navbar = () => {
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
|
|
return (
|
|
<nav className="lg:p-4 p-2 lg:py-10 mx-6 flex flex-row justify-between">
|
|
<Link
|
|
href="/"
|
|
id="logo"
|
|
className="flex flex-row gap-2 items-center group"
|
|
>
|
|
<Logo />
|
|
<div className="font-bold text-4xl font-mono transition-all ease-in duration-100 text-action group-hover:text-secondary">
|
|
peroxy
|
|
<span className="text-sm">.dev</span>
|
|
</div>
|
|
</Link>
|
|
<div className="hidden xl:flex flex-row gap-10 items-center font-medium font-mono">
|
|
{links.map(({ name, href }) => (
|
|
<Link href={href} key={name}>
|
|
<button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
|
|
{name}
|
|
</button>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="xl:hidden flex">
|
|
<button onClick={() => setShowMenu(true)} className="text-2xl">
|
|
<MenuIcon />
|
|
</button>
|
|
</div>
|
|
<AnimatePresence>
|
|
{showMenu && (
|
|
<div className="fixed h-screen w-screen top-0 left-0">
|
|
<motion.div
|
|
className="absolute left-0 top-0 h-full w-full bg-black/70 z-10"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
/>
|
|
<motion.div
|
|
className={`z-40 absolute w-1/2 bg-blue-900
|
|
right-0 top-0 px-10 py-6 h-full`}
|
|
initial={{ x: "100%" }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: "100%" }}
|
|
transition={{ ease: "easeInOut", duration: 0.4 }}
|
|
>
|
|
<button onClick={() => setShowMenu(false)} className="text-2xl">
|
|
<CloseIcon />
|
|
</button>
|
|
<div className="flex flex-col gap-10 mt-10 font-bold font-mono">
|
|
{links.map(({ name, href }) => (
|
|
<Link href={href} key={name}>
|
|
<button>{name}</button>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
</nav>
|
|
);
|
|
};
|