From 59decc3962b11df9879db28935064209fc8deee6 Mon Sep 17 00:00:00 2001
From: Alvalen <alvalen.shafel04@gmail.com>
Date: Wed, 6 Sep 2023 12:29:16 +0700
Subject: [PATCH] [feat] add back button

---
 app/about/layout.jsx       |  4 +---
 app/about/page.jsx         | 15 +++++++++++++++
 app/projects/page.jsx      | 13 ++++++++++++-
 components/FixedButton.jsx |  9 +++++++++
 components/Navbar.jsx      |  2 +-
 5 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 components/FixedButton.jsx

diff --git a/app/about/layout.jsx b/app/about/layout.jsx
index a5828c6..b73d1c4 100644
--- a/app/about/layout.jsx
+++ b/app/about/layout.jsx
@@ -1,4 +1,3 @@
-// generate layour with footer
 import Footer from "@/components/Footer";
 
 export const metadata = {
@@ -7,9 +6,8 @@ export const metadata = {
 export default function Layout({ children }) {
   return (
     <>
-
       {children}
       <Footer />
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/app/about/page.jsx b/app/about/page.jsx
index 15909e5..0f65861 100644
--- a/app/about/page.jsx
+++ b/app/about/page.jsx
@@ -4,6 +4,11 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import Button from "@/components/Button";
 import Image from "next/legacy/image";
+import FixedButon from "@/components/FixedButton";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+
 
 // images
 import Me1 from "@/public/img/me1.jpg";
@@ -15,9 +20,19 @@ export default function Page() {
 		window.scrollTo(0, 0);
 	}, []);
 
+	
+	const handleBack = () => {
+		window.history.back();
+	};
 	return (
 		<>
 			<main className="overflow-hidden">
+				<FixedButon onClick={handleBack}>
+					<FontAwesomeIcon
+						icon={faChevronLeft}
+						className="text-black pr-10"
+					/>
+				</FixedButon>
 				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10">
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div
diff --git a/app/projects/page.jsx b/app/projects/page.jsx
index ff0c53b..3acca8e 100644
--- a/app/projects/page.jsx
+++ b/app/projects/page.jsx
@@ -20,6 +20,9 @@ import UnmuhJember from "@/public/projects/unmuh/unmuh1.png";
 import Porto from "@/public/projects/porto/porto1.png";
 
 import Hr from "@/components/Hr";
+import FixedButon from "@/components/FixedButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 const projects = [
 	{
@@ -85,10 +88,18 @@ export default function Page() {
 	useEffect(() => {
 		window.scrollTo(0, 0);
 	}, []);
-
+	const handleBack = () => {
+		window.history.back();
+	};
 	return (
 		<>
 			<main className="overflow-hidden">
+				<FixedButon onClick={handleBack}>
+					<FontAwesomeIcon
+						icon={faChevronLeft}
+						className="text-black pr-10"
+					/>
+				</FixedButon>
 				<div className="relative h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col mb-10">
 					<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 						<motion.div
diff --git a/components/FixedButton.jsx b/components/FixedButton.jsx
new file mode 100644
index 0000000..e7d05bc
--- /dev/null
+++ b/components/FixedButton.jsx
@@ -0,0 +1,9 @@
+const FixedButton = ({ children, onClick }) => (
+  <button
+  onClick={onClick}
+    className="fixed top-2 -left-2 md:left-10 flex justify-center items-center  rounded-full p-4  transition duration-300 ease-in-out z-50 transparent">
+    {children}
+  </button>
+);
+
+export default FixedButton;
\ No newline at end of file
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 81d8da0..a779a97 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -178,7 +178,7 @@ const Navbar = () => {
 					isNavOpen ? "bg-transparent" : "backdrop-filter backdrop-blur-md"
 				} inset-0  bg-opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
 				<div className="">
-					<h1 className="text-2xl">Alvalens</h1>
+					<h1 className="text-2xl ml-2 md:ml-0">Alvalens</h1>
 				</div>
 				<div className="flex flex-row items-center">
 					<button