navigation done only animations left to do for it

src/components/Hero.jsx

@@ -15,7 +15,7 @@ const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
         <span>
           Hi, I'm Yousif. <br />
         </span>{" "}
-        I'm a Full-Stack Developer from Germany.
+        I'm a Full-Stack Developer from <span>Germany</span>.
       </p>
     </div>
   );

src/components/Home.jsx

@@ -37,7 +37,11 @@ const Home = () => {
       <LangSelect />
       <Mail />
       <Switch />
-      <Navigation />
+      <Navigation
+        initialAnimation="animate__backInDown"
+        onMouseEnter={handleMouseEnter}
+        onAnimationEnd={handleAnimationEnd}
+      />
       <div className="linkedIn container">
         <LinkedInIcon className="linkedInIcon" />
       </div>

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;

src/components/mainViews/About.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <div>About</div>
+  )
+}
+
+export default About

src/components/mainViews/Contact.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Contact = () => {
+  return (
+    <div>Contact</div>
+  )
+}
+
+export default Contact

src/components/mainViews/Experience.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Experience = () => {
+  return (
+    <div>Experience</div>
+  )
+}
+
+export default Experience

src/components/mainViews/Projects.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Projects = () => {
+  return (
+    <div>Projects</div>
+  )
+}
+
+export default Projects