navigation done only animations left to do for it

src/components/Navigation.jsx

@@ -1,8 +1,49 @@
 import React from "react";
 import "../css/Navigation.css";
+import { useState } from "react";
+import AddressCardIcon from "../assets/icons/navIcons/address-card.svg?react";
+import CodeIcon from "../assets/icons/navIcons/code.svg?react";
+import EnvelopeIcon from "../assets/icons/navIcons/envelope.svg?react";
+import HouseIcon from "../assets/icons/navIcons/house.svg?react";
+import SuitcaseIcon from "../assets/icons/navIcons/suitcase.svg?react";
+import { NavLink } from "react-router-dom";
+import clsx from "clsx";
 
-const Navigation = () => {
-  return <div className="navigation container">Nav</div>;
+const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
+  const [animation, setAnimation] = useState(initialAnimation);
+
+  const navItems = [
+    { name: "Home", to: "/", icon: HouseIcon, id: 1 },
+    { name: "About", to: "/about", icon: AddressCardIcon, id: 2 },
+    { name: "Experience", to: "/workExp", icon: SuitcaseIcon, id: 3 },
+    { name: "Projects", to: "/projects", icon: CodeIcon, id: 4 },
+    { name: "Contact", to: "/contact", icon: EnvelopeIcon, id: 5 },
+  ];
+  return (
+    <div
+      className={`navigation container animate__animated ${animation}`}
+      onMouseEnter={() => onMouseEnter(setAnimation)}
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <ul className="navList">
+        {navItems.map((item) => {
+          const IconComponent = item.icon;
+          return (
+            <li className="navItem" key={item.id}>
+              <NavLink
+                to={item.to}
+                className={({ isActive }) =>
+                  clsx("navLink", { active: isActive })
+                }
+              >
+                <span>{item.name}</span> <IconComponent className="navIcon" />
+              </NavLink>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
 };
 
 export default Navigation;