I'm working on customizing a dropdown menu and I want to add a functionality where if a parent li menu has an arrow class before the ul element, then clicking on that parent li menu will add a class called showMenu only to that specific sub-menu.
Here is the code snippet:
<ul className="nav-links">
<li>
<a href="#">
<i className='bx bx-grid-alt'></i>
<span className="link_name">Dashboard</span>
</a>
<ul className="sub-menu blank">
<li><a className="link_name" href="#">Category</a></li>
</ul>
</li>
<li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}> // sub menu parent
<div className="iocn-link">
<a href="#">
<i className='bx bx-collection'></i>
<span className="link_name">Category</span>
</a>
<i className='bx bxs-chevron-down arrow'></i> // arrow class
</div>
<ul className="sub-menu">
<li><a className="link_name" href="#">Category</a></li>
<li><a href="#">HTML & CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP & MySQL</a></li>
</ul>
</li>
<li onClick={subMenuToggle} className={`${subMenu ? 'showMenu' : ''}`}>// sub menu parent
<div className="iocn-link">
<a href="#">
<i className='bx bx-book-alt'></i>
<span className="link_name">Posts</span>
</a>
<i className='bx bxs-chevron-down arrow'></i> // arrow class
</div>
<ul className="sub-menu">
<li><a className="link_name" href="#">Posts</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Login Form</a></li>
<li><a href="#">Card Design</a></li>
</ul>
</li>
</ul>
I have attempted to implement this functionality by setting an onClick handler subMenuToggle in the parent submenu li. However, when I click on any sub menu parent item, it opens all the sub-menus instead of just the one I clicked on.
const [subMenu, setSubMenu] = useState(false)
const subMenuToggle = () => {
setSubMenu(!subMenu)
}
Any help would be greatly appreciated!