From 87c1ec1b82bf6db5e10e233d2547dd7201aeb241 Mon Sep 17 00:00:00 2001
From: Alvalen <alvalen.shafel04@gmail.com>
Date: Thu, 21 Sep 2023 10:27:17 +0700
Subject: [PATCH] [feat] reduce laggy at navbar and fix overflowed

---
 components/Footer.jsx |  6 +++---
 components/Navbar.jsx | 26 +++++++++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/components/Footer.jsx b/components/Footer.jsx
index b67f8d7..17edffd 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -7,14 +7,14 @@ import { faArrowAltCircleRight } from "@fortawesome/free-regular-svg-icons";
 
 export default function Footer() {
 	return (
-		<div className="flex justify-center items-center flex-col mt-5 ">
+		<div className="flex justify-center items-center flex-col mt-5 overflow-hidden">
 			<div className="flex justify-center items-center flex-col mt-5 self-center min-h-[50vh] border-b-2 min-w-[80vw] ">
 				<Link href="/#contact">
 					<motion.h2
 						className="text-xl font-medium mt-3 text-center text-gray-400  hover:underline whitespace-nowrap leading-none md:tracking-[0.5rem]"
 						initial={{
 							opacity: 0,
-							x: -200,
+							x: -100,
 						}}
 						whileInView={{
 							opacity: 1,
@@ -29,7 +29,7 @@ export default function Footer() {
 						className="text-5xl md:text-7xl font-medium mt-3  hover:underline whitespace-nowrap leading-none"
 						initial={{
 							opacity: 0,
-							x: 200,
+							x: 100,
 						}}
 						whileInView={{
 							opacity: 1,
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 5115d77..dd63022 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -13,9 +13,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 		open: {
 			clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
 			transition: {
-				type: "spring",
-				stiffness: 400,
-				damping: 20,
+				type: "tween", // Use a linear or ease transition
 			},
 		},
 		closed: {
@@ -81,7 +79,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 	return (
 		<>
 			<motion.div
-				className={`fixed z-[45] w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease duration-700 overflow-clip`}
+				className={`fixed z-[45] w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease duration-700 overflow-hidden`}
 				variants={navVariant}
 				animate={isNavOpen ? "open" : "closed"}
 				initial={false}>
@@ -175,10 +173,19 @@ const Navbar = () => {
 			<nav
 				ref={navRef}
 				className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
-					isNavOpen ? "bg-transparent" : "backdrop-filter backdrop-blur-md"
+					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 ml-2 md:ml-0">Alvalens</h1>
+				<div>
+					<h1
+						className={`text-2xl ml-2 md:ml-0  ${
+							isNavOpen
+								? "text-white"
+								: ""
+						}`}>
+						Alvalens
+					</h1>
 				</div>
 				<div className="flex flex-row items-center">
 					<button
@@ -200,10 +207,7 @@ const Navbar = () => {
 				</div>
 			</nav>
 			{/* items */}
-			<NavItems
-				isNavOpen={isNavOpen}
-				setIsNavOpen={setIsNavOpen}
-			/>
+			<NavItems isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
 		</>
 	);
 };