Tengo un menú que se muestra como un menú de hamburguesa/cajón cuando el ancho de la pantalla es inferior a cierta cantidad y estoy usando resorte de reacción para deslizar ese menú en la pantalla cuando se hace clic en el "icono de hamburguesa". Mi problema es que el <ul> está dentro de ese <animated.div> de react-springs, por lo que cuando el tamaño de la pantalla es más ancho y el menú de hamburguesas/cajón está oculto, el <ul> con los elementos de la lista se oculta con él, lo que No quiero, quiero que el menú se muestre normalmente en página (sin cajón) cuando la pantalla es más ancha. ¿Hay alguna manera de lograr esto sin tener que crear dos <ul> con los mismos <li> dos veces, uno dentro de <animated.div> que se muestra en un menú de cajón en pantallas más estrechas y otro que se muestra en la página? en pantallas más anchas?
React.js/JSX:
return ( //State of menuVisible starts off as false <FontAwesomeIcon className="menuBarIcon" icon={faBars} onClick={() => setMenuVisible(!menuVisible)}/> {menuTransitions( (styles, item) => item && <animated.div style={styles} className="menu"> <ul> <li><a>Menu Item One</a></li> <li><a>Menu Item Two</a></li> <li><a>Menu Item Three</a></li> <li><a>Menu Item Four</a></li> <li><a>Menu Item Five</a></li> </ul> </animated.div> )} );CSS:
//Wider screens .menuBarIcon { display: none; } @media (max-width: 1080px) { //Narrower screens .menuBarIcon { display: inline; float: right; padding: 10px; margin: 25px; } .menu { position: fixed; top: 0; left: 0; width: 320px; height: 100%; } }Lo resolví, lo que hice fue primero tener el <ul> fuera del <animated.div> para que ahora se muestre normalmente en pantallas más anchas. Luego agregué un operador ternario al <ul> basado en el estado de menuVisible para que alternara entre dos clases, una que ocultaría el <ul> y otra que lo mostraría. Luego, para colocarlo dentro del menú del cajón, simplemente agregué el CSS de la clase de menu al <ul> en la consulta de medios para pantallas más estrechas.
React.js/JSX:
return ( <FontAwesomeIcon className="menuBarIcon" icon={faBars} onClick={() => setMenuVisible(!menuVisible)}/> {menuTransitions( (styles, item) => item && <animated.div style={styles} className="menu"> </animated.div> )} //Class alternates between the two based on condition of the state of menuVisible <ul className={menuVisible ? "menuActive" : "menuInactive"}> <li><a>Menu Item One</a></li> <li><a>Menu Item Two</a></li> <li><a>Menu Item Three</a></li> <li><a>Menu Item Four</a></li> <li><a>Menu Item Five</a></li> </ul> );CSS:
@media (max-width: 1080px) { //Narrower screens .menu { position: fixed; top: 0; left: 0; width: 320px; height: 100%; } ul { //Added same CSS as .menu class to Ul to position the list within the drawer menu position: fixed; top: 0; left: 0; width: 280px; //width is different to compensate for padding in li height: 100% flex-direction: column; } .menuActive { //Ul displays normally when menuVisible state is true display: block; } .menuInactive { //Ul is hidden when menuVisible state is false display: none; } }