[feat] animate about

components/Navbar.js

@@ -6,11 +6,11 @@ const NavItems = ({ isNavOpen }) => {
 const [isMobile, setIsMobile] = useState(false);
 	const navVariant = {
 		open: (height = 1000) => ({
-			clipPath: `circle(${height * 2 + 200}px at calc(100% - 40px) 40px)`,
+			clipPath: `circle(${height + 400}px at calc(100% - 40px) 40px)`,
 			transition: {
 				type: "spring",
-				stiffness: 20,
-				restDelta: 2,
+				stiffness: 400,
+				damping: 30,
 			},
 		}),
 		closed: {
@@ -19,7 +19,7 @@ const [isMobile, setIsMobile] = useState(false);
 				delay: 0.5,
 				type: "spring",
 				stiffness: 400,
-				damping: 40,
+				damping: 30,
 			},
 		},
 	};

components/Sidebar.js

@@ -22,18 +22,20 @@ const Sidebar = () => {
 	};
 	return (
 		<div className="hidden md:flex fixed z-40 bg-gray-600 h-[50vh] w-14  flex-col justify-between items-center p-4 left-0 top-1/4 rounded-e-3xl">
-			<ul className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
-				<li>
+			<ul
+				id="sidebar"
+				className="flex flex-col justify-center items-center h-full space-y-16 text-gray-200">
+				<li data-menuanchor="home" className="active">
 					<button onClick={() => handleMoveToSection(1)}>
 						<FontAwesomeIcon icon={faHome} className="text-xl" />
 					</button>
 				</li>
-				<li>
+				<li data-menuanchor="about">
 					<button onClick={() => handleMoveToSection(2)}>
 						<FontAwesomeIcon icon={faUser} className="text-xl" />
 					</button>
 				</li>
-				<li>
+				<li data-menuanchor="projects">
 					<button onClick={() => handleMoveToSection(3)}>
 						<FontAwesomeIcon
 							icon={faFolderOpen}
@@ -41,7 +43,7 @@ const Sidebar = () => {
 						/>
 					</button>
 				</li>
-				<li>
+				<li data-menuanchor="contact">
 					<button onClick={() => handleMoveToSection(4)}>
 						<FontAwesomeIcon
 							icon={faEnvelope}