navigation done

src/components/Navigation.jsx

@@ -22,7 +22,7 @@ const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
   return (
     <div
       className={`navigation container animate__animated ${animation}`}
-      onMouseEnter={() => onMouseEnter(setAnimation)}
+      /* onMouseEnter={() => onMouseEnter(setAnimation)} */
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
       <ul className="navList">

src/css/Navigation.css

@@ -13,6 +13,11 @@
 
 .navItem {
   font-size: 1.5rem;
+  width: 100%;
+}
+
+.navItem:hover {
+  animation: jello 1s;
 }
 
 .navIcon {
@@ -26,7 +31,7 @@
   color: white;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   gap: 0.5rem;
 }