Tenho um sidebar no qual estou utilizando um dropdown ao passar o mouse sobre cada icon desse sidebar. Estou usando o useState para abrir o dropdown e gostaria de usar apenas um estado para todos, porém abrir cada um separadamente. Estou usando o useRef para abrir cada um separadamente, porém não estou sabendo como o fazer.
const Sidebar = () => {
const [dropdown, setDropdown] = useState(null);
const dashboard = useRef(dropdown)
const tickets = useRef(dropdown)
const services = useRef(dropdown);
const analytics = useRef(dropdown);
const register = useRef(dropdown);
const administracao = useRef(dropdown);)
const showDropdown = (e) => {
console.log(dashboard.current)
switch (e.target) {
case "Dashboard":
setDropdown(true);
break;
case "Tickets":
setDropdown(true);
break;
default:
break;
}
};
const closeDropdown = () => {
setDropdown(null);
};
return(
<nav className="sidebar__content">
<div className="logo__area sb-flex-center">
<Logo width={"2.5rem"}/>
</div>
<div className="sidebar__icons" >
<div className="sb-flex-aligcenter" ref={dashboard}>
<NavLink to="/" end activeClassName="icon-select" onMouseOver={showDropdown} onMouseOut={closeDropdown} id="Dashboard" className="sb-flex-aligcenter" >
<Icon iconSvg={Icons.IconDashboard} iconWidth={1.75} iconWidthContainer={[3,2.6]} iconStyle={"icon__area"} iconStatus={""}/>
<span className="active-icon"></span>
</NavLink>
{dropdown===true && <SideModal titulo={"Dashboard"}/>}
</div>
<div className="sb-flex-aligcenter">
<NavLink to="tickets" activeClassName="icon-select" onMouseOver={showDropdown} onMouseOut={closeDropdown} id="Tickets" className="sb-flex-aligcenter" ref={tickets}>
<Icon iconSvg={Icons.IconTickets} iconWidth={1.5} iconWidthContainer={[3,2.6]} iconStyle={"icon__area"} disable={true}/>
<span className="active-icon" style={{}}></span>
</NavLink>
{dropdown===true && <SideModal titulo={"Tickets"}/>}
</div>
<div className="sb-flex-aligcenter">
<NavLink to="servicos" activeClassName="icon-select" onMouseOver={"showDropdown"} onMouseOut={"closeDropdown"} className="sb-flex-aligcenter">
<Icon iconSvg={Icons.IconServices} iconWidth={1.5} iconWidthContainer={[3,2.6]} iconStyle={"icon__area"}/>
<span className="active-icon" style={{}}></span>
</NavLink>
{dropdown && <SideModal titulo={"Serviços"} ref={services}/>}
</div>
<div className="sb-flex-aligcenter">
<NavLink to="analytics" activeClassName="icon-select" onMouseOver={"showDropdown"} onMouseOut={"closeDropdown"} className="sb-flex-aligcenter">
<Icon iconSvg={Icons.IconAnalytics} iconWidth={1.5} iconWidthContainer={[3,2.6]} iconStyle={"icon__area"}/>
<span className="active-icon" style={{}}></span>
</NavLink>
{dropdown && <SideModal titulo={"Analytics"} ref={analytics}/>}
</div>
<div className="sb-flex-aligcenter">
<NavLink to="cadastro" activeClassName="icon-select" onMouseOver={"showDropdown"} onMouseOut={"closeDropdown"} className="sb-flex-aligcenter">
<Icon iconSvg={Icons.IconRegister} iconWidth={1.5} iconWidthContainer={[3,2.6]} iconStyle={"icon__area"}/>
<span className="active-icon" style={{}}></span>
</NavLink>
{dropdown && <SideModal titulo={"Cadastros"} ref={register}/>}
</div>
<div className="sb-flex-aligcenter">
<NavLink to="administracao" activeClassName="icon-select" onMouseOver={"showDropdown"} onMouseOut={"closeDropdown"} className="sb-flex-aligcenter">
<Icon iconSvg={Icons.IconManagement} iconWidth={1.5} iconWidthContainer={[3,2.6]} iconStyle={"icon__area"}/>
<span className="active-icon" style={{}}></span>
</NavLink>
{dropdown && <SideModal titulo={"Administração"} ref={administracao}/>}
</div>
</div>
<div className="side-footer icon-hover sb-flex-center" onMouseOver={"showDropdown"} onMouseOut={"closeDropdown"}>
<Icon iconSvg={Icons.IconModules} iconWidth={1.3} iconWidthContainer={[3,2.6]} iconStyle={"icon__area"} className="teste"/>
</div>
</nav>
)
}
export default Sidebar;