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

20
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,26 +34,27 @@ 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>
</div>
<AnimatePresence> <AnimatePresence>
{showMenu && ( {showMenu && (
<> <div className="fixed h-screen w-screen top-0 left-0">
<motion.div <motion.div
className="absolute left-0 top-0 h-screen w-screen bg-black/70 z-10" className="absolute left-0 top-0 h-full w-full bg-black/70 z-10"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
/> />
<motion.div <motion.div
className={`z-40 absolute w-1/2 bg-blue-900 className={`z-40 absolute w-1/2 bg-blue-900
right-0 top-0 px-10 py-6 h-screen`} right-0 top-0 px-10 py-6 h-full`}
initial={{ x: 100 }} initial={{ x: "100%" }}
animate={{ x: 0 }} animate={{ x: 0 }}
exit={{ x: 100 }} exit={{ x: "100%" }}
transition={{ duration: 0.3 }} transition={{ ease: "easeInOut", duration: 0.4 }}
> >
<button onClick={() => setShowMenu(false)} className="text-2xl"> <button onClick={() => setShowMenu(false)} className="text-2xl">
<CloseIcon /> <CloseIcon />
@@ -66,10 +67,9 @@ export const Navbar = () => {
))} ))}
</div> </div>
</motion.div> </motion.div>
</> </div>
)} )}
</AnimatePresence> </AnimatePresence>
</div>
</nav> </nav>
); );
}; };