GA-080 (FE) Implementar vista mobile y tabled para la barra de navegación

[aikolabs]

GA-080 (FE) Implementar vista mobile y tablet para la barra de navegación

User Story

Como usuario quiero poder ver la barra de navegación en dispositivos mobile y tablet para poder navegar por la aplicación.

Criterios de aceptación

• La barra de navegación debe ser responsive.
• La barra de navegación debe ser visible en dispositivos mobile y tablet.
• La barra de navegación debe ser visible en dispositivos desktop.
• Se debe implementar un menú hamburguesa para dispositivos mobile y tablet.
• Cuando hago click en el menú hamburguesa se debe cambiar el ícono a una X a través de un state.
• Cuando hago click en el menú hamburguesa se debe mostrar un menú con las opciones de navegación.
• Cuando hago click en el la x se debe ocultar el menú con las opciones de navegación.

Ejemplo

    <ul className="hidden xl:flex">
        <li>Home</li>
        <li>Docs</li>
        <li>...</li>
    </ul>

    <MdMenu className="xl:hidden" />

Recomendaciones

• utilizar la librería react-icons para el ícono del menú hamburguesa.
• utilizar https://github.com/new-data-services/tailwindcss-animated#readme para las animaciones.