import React, { useEffect, useRef } from 'react'; const DynamicNav = () => { const highlightRef = useRef(null); const linksRef = useRef([]); useEffect(() => { const links = linksRef.current; const highlight = highlightRef.current; const handleHover = (e) => { const link = e.currentTarget.parentNode; const { left, width } = link.getBoundingClientRect(); const navRect = e.currentTarget.closest('nav').getBoundingClientRect(); // Move highlight using string concatenation highlight.style.transform = 'translateX(' + (left - navRect.left) + 'px)'; highlight.style.width = width + 'px'; // Reset all links' color (keep original hover color) links.forEach((link) => link.classList.remove('dynamicNav-highlighted')); // Optional: Change hovered link's text size for effect, but not color e.currentTarget.style.transform = 'scale(1.1)'; }; const handleClick = (e) => { e.preventDefault(); links.forEach((link) => link.parentNode.classList.remove('dynamicNav-active-link')); e.currentTarget.parentNode.classList.add('dynamicNav-active-link'); }; links.forEach((link) => { link.addEventListener('mousemove', handleHover); link.addEventListener('click', handleClick); }); // Set initial position using string concatenation const { left, width } = links[0].parentNode.getBoundingClientRect(); const navRect = links[0].closest('nav').getBoundingClientRect(); highlight.style.transform = 'translateX(' + (left - navRect.left) + 'px)'; highlight.style.width = width + 'px'; // Highlight the first link initially links[0].classList.add('dynamicNav-highlighted'); return () => { links.forEach((link) => { link.removeEventListener('mousemove', handleHover); link.removeEventListener('click', handleClick); }); }; }, []); return (
{/* Navigation */}
); }; export default DynamicNav;