Estoy creando una barra de menú lateral en mi aplicación de reacción. Inicialmente, quiero que la barra de menú lateral esté cerrada y el contenido principal en la pantalla debe ser grande. Al hacer clic o al pasar el mouse sobre la barra de menú lateral, la barra de menú lateral debe estar abierta y el contenido principal en la pantalla debe volverse pequeño. Si el usuario mueve el mouse desde la barra de menú lateral a cualquier ubicación diferente de la pantalla (es decir, sin pasar el mouse sobre la barra de menú lateral), el menú lateral debe estar cerca y el contenido principal en la pantalla debe volverse grande
estoy haciendo de esta manera
const ss = false; const [s, sets] = useState(ss); const [c,cset] = useState(!ss); function MouseOver(event) { sets(!ss); } function MouseOut(event){ sets(ss); } <div onMouseOver={MouseOver} onMouseOut={MouseOut} onclick={cset(!c)} className= {(s && c)? "sideMenu" : "sideMen"}> <ConsoleSideMenu ss={sd}/> </div> <div className= {(s && c)? "content1" : "content"}>{main_content}</div>La propiedad css "sideMenu" abre la barra de menú lateral, la propiedad css "sideMen" cierra la barra de menú lateral, la propiedad css "content" hace que el contenido principal sea grande, la propiedad css "content1" hace que el contenido principal sea pequeño,
Actualmente está funcionando (si no se agregaron los cambios al hacer clic) pero no puede obtener la funcionalidad deseada.
No estoy seguro de haber respondido correctamente a su pregunta, pero si desea pasar el parámetro (! c) a la función que activó el detector de eventos, al hacer clic, debe pasarlo de esta manera:
onclick={()=>{cset(!c)}}
el evento de clic llama a la función anónima que, a su vez, llama a la función cset y pasa el parámetro requerido.