I am having an issue with my drop down menu that has me a bit stumped. I have a web application that consists of a navbar component at the top and a page component right below it. For some reason when I am on the home page, the dropdown for one of the nav links works fine and allows me to hover over the nav items, but when I am on the login page the drop down menu disappears as soon as I hover off of it. I load in my Navbar content dynamically in the following component:
NavItems.jsx:
import React, {useState} from 'react';
import Dropdown from './Dropdown';
import {Link} from 'react-router-dom';
function NavItems(props) {
const items = props.items;
const [click, setClick] = useState(false);
const handleClick = () => setClick(!click);
const [dropdown, setDropdown] = useState(false);
const onMouseEnter = () => {
if (window.innerWidth < 960) {
setDropdown(false);
} else {
setDropdown(true);
}
};
const onMouseLeave = () => {
if (window.innerWidth < 960) {
setDropdown(false);
} else {
setDropdown(false);
}
};
return (
<div className='link-container' onMouseLeave={onMouseLeave}>
<li className='nav-item'>
{items.subNav ? (
<>
<Link
className={items.cName}
to={items.path}
onClick={() => setClick(false)}
onMouseEnter={onMouseEnter}
>
{items.title}
</Link>
{dropdown && <Dropdown submenus={items.subNav} />}
</>
) : (
<Link
className={items.cName}
to={items.path}
onClick={() => setClick(false)}
>
{items.title}
</Link>
)}
</li>
</div>
);
}
export default NavItems;I don't understand why my dropdown works on the home page but not on the login page when the navbar is separate from the page itself. Can anyone help me figure this out?