From 60497c2128940fb53938526aa66a73203079fd87 Mon Sep 17 00:00:00 2001
From: Jordan Roberts <jrobertswebdev@gmail.com>
Date: Tue, 2 May 2023 23:46:46 -0500
Subject: [PATCH] fade in with framermotion

---
 components/menu.tsx | 30 +++++++++++++++++-------------
 package-lock.json   | 39 +++++++++++++++++++++++++++++++++++++++
 package.json        |  1 +
 3 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/components/menu.tsx b/components/menu.tsx
index c5475fb..7dc8809 100644
--- a/components/menu.tsx
+++ b/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>
   )
 }
 
diff --git a/package-lock.json b/package-lock.json
index bb974c0..5a300dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,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",
@@ -49,6 +50,21 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -1920,6 +1936,29 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.12.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.7.tgz",
+      "integrity": "sha512-awOlKkDvcQpv92Pzw5KCWFehxzvqtGYZqnLvHWZvQFpIxaPsRMypRX+vhugpciOzQPkZbc37X4dJLIZLfGM/CQ==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
diff --git a/package.json b/package.json
index 73169d7..a119ff3 100644
--- a/package.json
+++ b/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",