mobile navigation

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,26 +34,27 @@ export const Navbar = () => {
           </Link>
         ))}
       </div>
-      <div className="lg:hidden flex">
+      <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-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 }}
               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 }}
+                right-0 top-0 px-10 py-6 h-full`}
+              initial={{ x: "100%" }}
               animate={{ x: 0 }}
-                exit={{ x: 100 }}
-                transition={{ duration: 0.3 }}
+              exit={{ x: "100%" }}
+              transition={{ ease: "easeInOut", duration: 0.4 }}
             >
               <button onClick={() => setShowMenu(false)} className="text-2xl">
                 <CloseIcon />
@@ -66,10 +67,9 @@ export const Navbar = () => {
                 ))}
               </div>
             </motion.div>
-            </>
+          </div>
         )}
       </AnimatePresence>
-      </div>
     </nav>
   );
 };