I tried to build a nested dropdown menu from scratch on a sidebar.
The issue is when I open a nested menu it opens all nested menu that is in the sidebar at the same time, how should I manage to only open the target one ?
Btw if there's is a better and neat pattern please let me know. Thank you in advance for the insights.
import React, { useState } from "react";
import dropIcon from "./../../assets/dropArrow.svg";
import "./styles.scss";
const PhoneNavigation = ({ openSideBar }) => {
const [openSub, setOpenSub] = useState(false);
const handleOpenSubMenu = (e) => {
if (!openSub) {
setOpenSub(true);
e.target.previousElementSibling.firstElementChild.classList.add(
"show_sub_menu"
);
} else {
setOpenSub(false);
e.target.previousElementSibling.firstElementChild.classList.remove(
"show_sub_menu"
);
}
};
return (
<nav className={openSideBar ? "side_bar show_side_bar" : "side_bar"}>
<ul>
<div className="side_bar_item">
<li className="side_bar_link">
Courses
<div className="sub_menu_box">
<ul>
<li className="sub_menu_link">Online</li>
<li className="sub_menu_link">Schedule</li>
<li className="sub_menu_link">Private</li>
<li className="sub_menu_link">Classes</li>
</ul>
</div>
</li>
<img
onClick={handleOpenSubMenu}
src={dropIcon}
alt="dropdown-menu-icon"
/>
</div>
<div className="side_bar_item">
<li className="side_bar_link">
About us
<div
className={
openSub ? "sub_menu_box show_sub_menu" : "sub_menu_box"
}
>
<ul>
<li className="sub_menu_link">FAQ</li>
<li className="sub_menu_link">Qualifications</li>
<li className="sub_menu_link">Contact us</li>
</ul>
</div>
</li>
<img
onClick={handleOpenSubMenu}
src={dropIcon}
alt="dropdown-menu-icon"
/>
</div>
<div className="side_bar_item">
<li className="side_bar_link">
About us
<div
className={
openSub ? "sub_menu_box show_sub_menu" : "sub_menu_box"
}
>
<ul>
<li className="sub_menu_link">FAQ</li>
<li className="sub_menu_link">Qualifications</li>
<li className="sub_menu_link">Contact us</li>
</ul>
</div>
</li>
<img
onClick={handleOpenSubMenu}
src={dropIcon}
alt="dropdown-menu-icon"
/>
</div>
</ul>
</nav>
);
};
export default PhoneNavigation;
// Style Sheet
$base-color: #081a45;
$base-color2: #00aae7;
.side_bar {
position: fixed;
background-color: white;
top: 100px;
width: 100%;
height: 100%;
z-index: 99;
transform: translate(-100%);
transition: all 5s ease-in;
.side_bar_item {
display: flex;
width: 90%;
align-items: center;
margin: 20px auto;
border-bottom: 1px solid $base-color;
padding-bottom: 30px;
position: relative;
li {
list-style: none;
}
.side_bar_link {
color: $base-color;
font-weight: bold;
.sub_menu_box {
position: relative;
left: 20px;
width: 300px;
display: none;
.sub_menu_link {
margin: 8px 0;
font-size: 0.9rem;
color: $base-color2;
font-weight: normal;
}
}
.show_sub_menu {
display: block;
}
}
img {
position: absolute;
cursor: pointer;
width: 15px;
top: 5px;
left: 95%;
}
}
}
.show_side_bar {
transform: translate(0);
transition: all 5s ease-in;
}
Copyright Notice:Content Author:「Mugi」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/68384777/sidebar-nested-dropdown-menu-reactjs