I want to reuse an hamburger menu I had from a previous react app in my new Nextjs app. There is a siple animation on a list of links. On the previous app, the link where with React-router-dom and it was ok. Since I now use next/link, it doesn't work anymore. Any reason for that?
const handleHover = (e) => {
gsap.to(e.target, {
duration: 0.3,
y: 3,
skewX: 4,
ease: 'power3.inOut'
});
};
const handleHoverExit = (e) => {
gsap.to(e.target, {
duration: 0.3,
y: -3,
skewX: 0,
ease: 'power3.inOut'
});
}
<nav>
<ul>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="/nouveautes">Nouveautés</Link></li>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="/catalogue"> Catalogue</Link></li>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="https://shop.paradisepapers.fr/"> Diffusion</Link></li>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="/contacts"> Contacts</Link></li>
<li><Link
onMouseEnter={handleHover}
onMouseOut={handleHoverExit}
ref={el => (boxRefs.current = el)} href="https://cmeditions.us17.list-manage.com/subscribe/post?u=385cdf2c81c2f3bdd2ff1583e&id=fa0ff0c34e"> Newsletter</Link></li>
</ul>
</nav>