fade in with framermotion

components/menu.tsx

@@ -1,3 +1,4 @@
+import { motion, AnimatePresence } from 'framer-motion'
 import { links } from '@/lib/links'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -12,20 +13,23 @@ const Menu = ({ show, setShow }: MenuProps) => {
   const { pathname } = router
 
   return (
-    <div
-      className={`absolute bg-black text-white top-0 left-0 h-full w-full flex justify-center items-start transition-all ${
-        show ? 'translate-x-0' : 'translate-x-full'
-      }`}>
-      <div className='flex flex-col gap-8 text-3xl font-semibold pt-40'>
-        {links.map((link) => (
-          <Link key={link.linkName} href={link.linkPath}>
-            <div className={`${pathname == link.linkPath ? 'text-red-600' : 'text-white'}`} onClick={() => setShow(!show)}>
-              {link.linkName}
+    <AnimatePresence>
+      {show && (
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+          <div className='absolute bg-black text-white top-0 left-0 h-full w-full flex justify-center items-start transition-all'>
+            <div className='flex flex-col gap-8 text-3xl font-semibold pt-40'>
+              {links.map((link) => (
+                <Link key={link.linkName} href={link.linkPath}>
+                  <div className={`${pathname == link.linkPath ? 'text-red-600' : 'text-white'}`} onClick={() => setShow(!show)}>
+                    {link.linkName}
+                  </div>
+                </Link>
+              ))}
             </div>
-          </Link>
-        ))}
-      </div>
-    </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
   )
 }
 

package.json

@@ -15,6 +15,7 @@
     "autoprefixer": "10.4.14",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.4",
+    "framer-motion": "^10.12.7",
     "hamburger-react": "^2.5.0",
     "next": "13.3.4",
     "postcss": "8.4.23",