renttrent/peroxy_site
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dynamic markdown
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Rei
2022-12-27 17:33:00 +01:00
parent 16a53e169a
commit bc51e625b4
14 changed files with 1042 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
components/Navbar.tsx
View File

@@ -1,51 +1,69 @@
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";
const links = [
{ name: "blog", href: "/blog" },
{ name: "projects", href: "/projects" },
{ name: "github", href: "https://github.com/kookroach" },
];
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>
<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-end transition-all ease-in duration-100 text-action hover:text-secondary"
>
<div className="font-bold text-4xl font-mono">peroxy</div>
</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>
{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="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>
<AnimatePresence>
{showMenu && (
<>
<motion.div
className="absolute left-0 top-0 h-screen w-screen 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-screen`}
initial={{ x: 100 }}
animate={{ x: 0 }}
exit={{ x: 100 }}
transition={{ duration: 0.3 }}
>
<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>
</>
)}
</AnimatePresence>
</div>
</nav>
);