0

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;

1 Resposta 1

0

Usar o useRef talvez não seja a melhor escolha, já que o .current poderá ficar confuso quando usado com a mesma referência por outros elementos. Na minha opinião a melhor escolha seria você criar um único componente Dropdown e manter o estado individual para cada componente, assim você evitaria o compartilhamento de hooks. Outra solução é você usar como estado de dropdown um objeto que mantenha os valores booleanos para cada um dos elementos, algo como o seguinte:

const [dropdown, setDropdown] = useState({"Dashboard": true, "Tickets": false})

Os dois métodos funcionam, mas eu escolheria abstrair tudo em um só componente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .