animate in and out back arrow

winpax · Dec 19, 2024 · bf34311 · bf34311
1 parent 29ffb0d
commit bf34311
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 20 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
 		"@next/mdx": "^15.1.1",
 		"@types/mdx": "^2.0.13",
 		"gray-matter": "^4.0.3",
+		"motion": "^11.15.0",
 		"next": "^15.1.1",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",

diff --git a/src/app/_components/Back.tsx b/src/app/_components/Back.tsx
@@ -1,17 +1,29 @@
 'use client';
 
+import { AnimatePresence, motion } from 'motion/react';
+import { useRouter, usePathname } from 'next/navigation';
 import { IoArrowBack } from 'react-icons/io5';
 
-export function Back({}) {
+export function Back() {
+	const router = useRouter();
+	const pathname = usePathname();
+
 	return (
-		<button
-			className="btn btn-ghost btn-lg btn-circle fixed left-5 top-5"
-			title="Go back"
-			onClick={() => {
-				window.history.back();
-			}}
-		>
-			<IoArrowBack />
-		</button>
+		<AnimatePresence>
+			{pathname !== '/' && (
+				<motion.button
+					className="btn btn-ghost btn-lg btn-circle fixed left-5 top-5"
+					title="Go back"
+					onClick={() => {
+						router.back();
+					}}
+					initial={{ opacity: 0 }}
+					whileInView={{ opacity: 1 }}
+					exit={{ opacity: 0 }}
+				>
+					<IoArrowBack />
+				</motion.button>
+			)}
+		</AnimatePresence>
 	);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { Roboto, Roboto_Mono } from 'next/font/google';
+import { Back } from './_components/Back';
 import './globals.scss';
 
 const roboto = Roboto({
@@ -27,6 +28,7 @@ export default function RootLayout({
 			<body
 				className={`${roboto.className} ${robotoMono.className} box-border min-h-full w-full pb-12 text-lg antialiased`}
 			>
+				<Back />
 				{children}
 			</body>
 		</html>

diff --git a/src/app/projects/layout.tsx b/src/app/projects/layout.tsx