changed animation of the navbar

Author: 20ns

src/components/Navbar.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 const Navbar = ({ onToggle }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [hoveredItem, setHoveredItem] = useState(null);
 
   const handleMouseEnter = () => {
     setIsOpen(true);
@@ -11,35 +12,53 @@ const Navbar = ({ onToggle }) => {
   const handleMouseLeave = () => {
     setIsOpen(false);
     onToggle(false);
+    setHoveredItem(null); // Reset hovered item on mouse leave
   };
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth >= 600) {
-        setIsOpen(false);
-        onToggle(false);
-      }
-    };
-
-    window.addEventListener('resize', handleResize);
+  const handleItemHover = (item) => {
+    setHoveredItem(item);
+  };
 
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
+  const handleItemLeave = () => {
+    setHoveredItem(null);
+  };
 
   const smoothScroll = (targetId) => {
     const targetElement = document.getElementById(targetId);
     if (targetElement) {
       const offsetTop = targetElement.getBoundingClientRect().top + window.pageYOffset;
-
       window.scrollTo({
         top: offsetTop,
         behavior: 'smooth',
       });
     }
   };
 
+  // Helper function to render animated text
+  const renderAnimatedText = (item, text, shortText) => {
+    return (
+      <span className="inline-block overflow-hidden">
+        {isOpen ? (
+          <span className="flex">
+            {text.split('').map((letter, index) => (
+              <span
+                key={index}
+                className={`letter ${
+                  hoveredItem === item ? 'animate-letter' : ''
+                }`}
+                style={{ animationDelay: `${index * 0.1}s` }}
+              >
+                {letter}
+              </span>
+            ))}
+          </span>
+        ) : (
+          shortText
+        )}
+      </span>
+    );
+  };
+
   return (
     <nav
       className={`fixed top-1/2 right-0 w-16 sm:w-32 h-[300px] bg-gray-800 bg-opacity-70 text-white transition-all duration-300 transform -translate-y-1/2 ${
@@ -58,11 +77,13 @@ const Navbar = ({ onToggle }) => {
             href="#"
             className="hover:text-blue-400 whitespace-nowrap text-shadow-lg"
             onClick={(e) => {
-              e.preventDefault(); 
+              e.preventDefault();
               smoothScroll('hero');
             }}
+            onMouseEnter={() => handleItemHover('home')}
+            onMouseLeave={handleItemLeave}
           >
-            {isOpen ? 'Home' : 'H'}
+            {renderAnimatedText('home', 'Home', 'H')}
           </a>
         </li>
         <li className="mb-4">
@@ -71,10 +92,12 @@ const Navbar = ({ onToggle }) => {
             className="hover:text-blue-400 whitespace-nowrap text-shadow-lg"
             onClick={(e) => {
               e.preventDefault();
-              smoothScroll('portfolio'); 
+              smoothScroll('portfolio');
             }}
+            onMouseEnter={() => handleItemHover('projects')}
+            onMouseLeave={handleItemLeave}
           >
-            {isOpen ? 'Projects' : 'P'}
+            {renderAnimatedText('projects', 'Projects', 'P')}
           </a>
         </li>
         <li>
@@ -85,8 +108,10 @@ const Navbar = ({ onToggle }) => {
               e.preventDefault();
               smoothScroll('contact');
             }}
+            onMouseEnter={() => handleItemHover('contact')}
+            onMouseLeave={handleItemLeave}
           >
-            {isOpen ? 'Contact' : 'C'}
+            {renderAnimatedText('contact', 'Contact', 'C')}
           </a>
         </li>
       </ul>

src/styles.css

@@ -30,14 +30,13 @@ nav {
   background-color: rgba(44, 44, 44, 0.85);
   position: fixed;
   top: 50%;
-  right: 0;
+  right: 10%;
   transform: translateY(-50%);
   border-radius: 9999px;
   height: 300px;
   width: 60px;
   transition: width 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-  border: 2px solid white;
 }
 
 /* Apply frosted glass effect when the navbar is open */
@@ -115,12 +114,36 @@ nav ul li a.text-shadow-lg {
   background-color: var(--light-gray); /* Light gray line */
   opacity: 0.3; /* Make the line subtle */
 }
+/* Letter animation */
+/* Letter animation */
+.letter {
+  display: inline-block;
+  opacity: 1; /* Ensure letters are always visible */
+  transform: translateY(0); /* Reset transform */
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.animate-letter {
+  opacity: 1;
+  transform: translateY(0);
+  animation: fadeInUp 0.3s ease forwards;
+}
 
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 /* Hero Section Styles */
 .hero {
   flex: 1;
   text-align: right; /* Align text to the right (right-to-left) */
-  padding-right: 20px; /* Add padding to avoid overlap with the line */
+  padding-right: 0px; /* Add padding to avoid overlap with the line */
 }
 
 .hero h1 {