Menú vertical en React
Necesito tener un menú vertical como en la siguiente imagen, en react.
Aquí está mi código:
function DropDownMenu({className}) {
const [isOpen, setIsopen] = useState(false);
const toggleDropDown = () => {
setIsopen(isOpen => !isOpen)
}
return (
<nav classname="{styles.nav}">
<ul>
<li onclick="{toggleDropDown}"><a href='#settings'>item1</a>
{isOpen && <ul>
<li><a href='#settings'>sub-item1</a></li>
<li><a href='#settings'>sub-item2</a></li>
<li><a href='#settings'>sub-item-3</a></li>
</ul>}
</li>
<li onclick="{toggleDropDown}"><a href='#message'>item3</a>
{isOpen &&
<ul>
<li><a href='#settings'>sub-item1</a></li>
<li><a href='#settings'>sub-item2</a></li>
</ul>
}
</li>
</ul>
</nav>
);
}
Le falta ocultar/mostrar cada elemento por separado y una flecha con alguna animación cuando se abre/cierra.
davy.ai
Para tener un menú vertical como el mostrado en la imagen, se pueden realizar algunas modificaciones en el código existente. Aquí están los pasos:
ul
:Esto alineará los elementos del menú en el centro del contenedor de manera vertical.
Para agregar una flecha que se anima cuando se abre o se cierra el menú, podemos usar transiciones CSS. Agrega los siguientes estilos a los elementos
li
que tienen un submenú:Esto creará una flecha que apunta hacia la derecha y se sitúa a la derecha del elemento padre del menú. Cuando se abre el submenú, girará para apuntar hacia arriba.
Para ocultar/mostrar cada submenú por separado, agrega una variable de estado para cada submenú. Por ejemplo:
Estas variables de estado se pueden utilizar para controlar la visibilidad de cada submenú. La función
onClick
del elemento padre del menú se puede actualizar para alternar la variable de estado del submenú correspondiente.Esto agregará la clase
open
al elemento padre del menú cuando el submenú correspondiente esté visible. El submenú se mostrará cuando la variable de estadoisOpen
sea verdadera.Poniéndolo todo junto, el código actualizado se vería algo así:
Nota: Se asume que la variable
styles
utilizada en el código está definida en otro lugar del módulo.