feat: mobile nav animation

zaida04 · Jan 24, 2024 · 10e8e47 · 10e8e47
1 parent 5e9d537
commit 10e8e47
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.3.3"
   }
 }
diff --git a/src/components/nav/Navbar.tsx b/src/components/nav/Navbar.tsx
@@ -15,7 +15,7 @@ function NavbarLinks() {
             {navbarLabels.map(key => {
                 const destination = navbar[key as keyof typeof navbar];
 
-                return <div>
+                return <div key={key}>
                     <a className="text-base" href={destination}>{key}</a>
                 </div>
             })}
@@ -40,7 +40,7 @@ export default function Navbar() {
             <Menu onClick={() => setShow(!show)} size={40} />
         </div>
 
-        {show && <div className="flex flex-col w-full gap-4">
+        {show && <div className="flex flex-col w-full gap-4 animate-in slide-in-from-top duration-500 ">
             <NavbarLinks />
         </div>}
     </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,5 +13,8 @@ export default ({
 			},
 		},
 	},
-	plugins: [],
+	plugins: [
+		// @ts-ignore
+		require("tailwindcss-animate")
+	],
 } satisfies Config);