Floating Aside Navigation - Copy this Html, Tailwind Component to your project
Detalles del Aside: Ubicación y Estilo: Debe ser flotante, posicionándose en el lado izquierdo de la pantalla. Diseñado con un estilo limpio y moderno, similar al mostrado en la imagen, con bordes redondeados y un fondo gris o semitransparente. Debe tener dos estados: Colapsado: Solo muestra un botón o ícono principal en formato compacto. Expandido: Al hacer clic en el ícono principal, el aside se despliega tipo acordeón, mostrando todas las opciones con íconos grandes. Transiciones y Animaciones: El cambio entre los estados colapsado y expandido debe incluir una animación suave, como una transición con movimiento horizontal o cambio de opacidad. Opcional: incluir una sombra suave (box shadow) al expandirse para dar sensación de profundidad. Opciones del Aside: Debe incluir al menos 5 opciones representadas por íconos grandes (como los de la imagen): Dinero ($): Representando "Registro". Gráfica: Representando "Analítica". Lámpara: Representando "Plan". Rayo: Representando "Coach". Líneas horizontales: Representando "Ahorro". Al pasar el mouse sobre cada ícono (o tocarlo en dispositivos móviles), debe mostrar un texto descriptivo como tooltip o en un pequeño contenedor. Dinámica Acordeón: Al presionar el aside (ícono principal), debe: Expandirse hacia la derecha y mostrar los íconos con sus nombres. Al volver a presionarlo, debe: Colapsarse y regresar al estado inicial compacto. Interacción: El aside debe estar visible en todo momento en el lado izquierdo de la pantalla (flotante). Compatible con dispositivos móviles: En pantallas pequeñas, el aside debe colapsarse automáticamente por defecto y permitir expandirse al tocar el ícono principal. Extras Opcionales: Añadir un efecto hover para los íconos, cambiando el color de fondo o del ícono al pasar el mouse. Permitir personalizar las opciones del aside (añadir o quitar íconos). Tecnologías a Usar: HTML para la estructura básica. CSS con TailwindCSS para el diseño y las transiciones animadas. JavaScript para gestionar el comportamiento dinámico del acordeón.
