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

mobile navigation

Browse Source
This commit is contained in:
rei
2022-12-28 20:32:16 +01:00
parent e3d98b4e32
commit 6c993511bf
1 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/Navbar.tsx
View File

@@ -25,7 +25,7 @@ export const Navbar = () => {
<span className="text-sm">.dev</span> <span className="text-sm">.dev</span>
</div> </div>
</Link> </Link>
<div className="hidden lg:flex flex-row gap-10 items-center font-medium font-mono"> <div className="hidden xl:flex flex-row gap-10 items-center font-medium font-mono">
{links.map(({ name, href }) => ( {links.map(({ name, href }) => (
<Link href={href} key={name}> <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"> <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out">
@@ -34,42 +34,42 @@ export const Navbar = () => {
</Link> </Link>
))} ))}
</div> </div>
<div className="lg:hidden flex"> <div className="xl:hidden flex">
<button onClick={() => setShowMenu(true)} className="text-2xl"> <button onClick={() => setShowMenu(true)} className="text-2xl">
<MenuIcon /> <MenuIcon />
</button> </button>
<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> </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> </nav>
); );
}; };