From 6c993511bfbb7c96fd1db08ad04be6f85cac0d62 Mon Sep 17 00:00:00 2001
From: rei <reiballa@gmail.com>
Date: Wed, 28 Dec 2022 20:32:16 +0100
Subject: [PATCH] mobile navigation

---
 components/Navbar.tsx | 66 +++++++++++++++++++++----------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index e930a6c..5097f7e 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -25,7 +25,7 @@ export const Navbar = () => {
           <span className="text-sm">.dev</span>
         </div>
       </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 }) => (
           <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">
@@ -34,42 +34,42 @@ export const Navbar = () => {
           </Link>
         ))}
       </div>
-      <div className="lg:hidden flex">
+      <div className="xl:hidden flex">
         <button onClick={() => setShowMenu(true)} className="text-2xl">
           <MenuIcon />
         </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>
+      <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>
   );
 };