I am relatively new to Next.js and I am attempting to create a menu with a hover effect using the following code:
import Link from 'next/link';
const MenuItem = ({ href, label }) => (
<Link href={href} className="menu-item">
{label}
</Link>
);
function MainNavigation() {
return (
<>
<style jsx>{`
.header {
height: 5rem;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 0 10%;
font-family: system-ui, sans;
font-size: 2.5rem;
font-weight: 800;
}
.logo {
font-size: 2rem;
color: white;
font-weight: bold;
}
.header ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: baseline;
}
.header li {
margin-left: 3rem;
}
.menu-item {
color: #000;
position: relative;
text-decoration: none;
}
.menu-item::before {
background: hsl(45 100% 70%);
content: "";
inset: 0;
position: absolute;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s ease-in-out;
z-index: -1;
}
.menu-item:hover::before {
transform: scaleX(1);
transform-origin: left;
}
`}</style>
<header className='header'>
<div className='logo'>React Meetups</div>
<nav>
<ul>
<li>
<MenuItem href='/' label='menu item 1' />
</li>
<li>
<MenuItem href='/' label='menu item 2' />
</li>
</ul>
</nav>
</header>
</>
);
}
export default MainNavigation;
According to the latest Next.js 13 documentation, we no longer need to include the anchor tag in the Link component. However, I am having trouble applying the hover effect to my menu item. The styles are not being applied as expected.
Could someone please review this code and provide feedback on what might be the issue?
Thank you!