modificacionNavBar

[claymartinez]

NavBar

[CBarreraB]

El navbar se divide en tres secciones: la Lateral Izquierda, el Módulo Central y la Lateral Derecha.

• En la sección Lateral Izquierda:

Encontramos un menú lateral que proporciona acceso a todas las vistas de la página. Cuando se visualiza en dispositivos móviles, se agregan categorías y marcas adicionales a este menú.

El logotipo de la NavBar está compuesto por dos imágenes, A y B. En la versión móvil, la imagen B no se muestra.

• En el Módulo Central:

Aquí se encuentran los botones de menú desplegables para Categorías y Marcas, así como la SearchBar. En tabletas, conservan su tamaño, pero en dispositivos móviles, la disposición cambia. Los botones de menú desplegables de Categorías y Marcas no se muestran, y la SearchBar se coloca en la parte inferior y centrada.

• En el Módulo Lateral Derecho:

Contiene un icono que proporciona acceso a la cuenta del usuario, con opciones para ver y acceder al carrito de compras, así como un botón para alternar entre el modo noche y día.

Este módulo siempre se adapta al lado derecho de la pantalla.

El fondo del navbar tiene un efecto llamado "Blur", que se aplica para crear un fondo difuminado mientras la barra permanece fija y visible en todo momento.

La barra de navegación se ajusta automáticamente al ancho de la pantalla, colocando los módulos en sus lados respectivos y manteniendo el módulo central siempre en el medio de la pantalla.

[CBarreraB]

Se ha identificado un problema durante la revisión y prueba en una pantalla de tamaño superior a Full HD, con una resolución de 1920px o más. El elemento en cuestión se está representando con un ancho que excede los 1920px, lo que está causando una experiencia deficiente para el usuario.

Para resolver este problema, se requiere que el ancho máximo de este elemento se limite a 1920px. Además, si el contenido dentro de este elemento es más ancho que 1920px, se debe asegurar que solo se muestre hasta este ancho máximo. Sin embargo, es esencial que los colores del contenedor continúen hasta los bordes de la pantalla, independientemente de su ancho. Esto dará la impresión de que los colores se adaptan completamente al ancho de la pantalla, pero el contenido en sí está contenido dentro de los 1920px.

Esta solución mejorará la experiencia del usuario en pantallas más grandes al limitar el ancho del elemento, manteniendo al mismo tiempo la apariencia visual deseada en términos de colores y diseño.

[CBarreraB]

@JohanMejia77 En dispositivos móviles y tabletas, se ha detectado un problema en la renderización de la barra de búsqueda. En el modo claro, la barra de búsqueda se vuelve invisible, mientras que en el modo oscuro, se muestra con un fondo gris poco deseado en su interior.

Tambien podemos observar que los iocnos de Usuario y Carrito no cambien de color en el Modo Oscuro.

[CBarreraB]

El ícono del menú hamburguesa presenta un problema de legibilidad cuando se expande. Esto se debe a un efecto de desenfoque (blur) que afecta negativamente la claridad de su lectura. Por lo tanto, se sugiere eliminar este efecto de desenfoque solo de este cuando se expande, ya que resulta contraproducente en términos de usabilidad, dificultando la lectura del menú.

El ícono del menú hamburguesa se observa que visualmente se ve mas grande que los otros iconos, por lo que se vera mejor de una altura similar en visualizacion al de Usuario.

[CBarreraB]

Corrección y Adaptación del Diseño del Navbar

Descripción:
En el navbar de la aplicación, se requieren ajustes para reflejar fielmente el diseño propuesto en Figma. A continuación se detallan las modificaciones necesarias:

Eliminación de "Iniciar Sesión":

La palabra "Iniciar Sesión" no estaba contemplada en los diseños originales de Figma y debe ser eliminada del navbar.
Ajuste de Break Points:

Verificar y corregir los Break Points para garantizar un funcionamiento adecuado y una experiencia de usuario consistente en diferentes dispositivos y tamaños de pantalla.
Modificación de la Barra de Búsqueda:

Asegurarse de que el tamaño de la barra de búsqueda sea coherente con el ancho del navbar, según se muestra en los diseños de Figma.
Observaciones Adicionales:

[CBarreraB]

Posicionamiento y Responsividad del Navbar

Descripción:
Se requieren ajustes en el posicionamiento y comportamiento responsivo del navbar, siguiendo las indicaciones y directrices proporcionadas. A continuación, se detallan los cambios necesarios:

Medición Simétrica de Contenedores Laterales:

Asegurar que los dos contenedores laterales tengan la misma medida para lograr un espacio simétrico entre ellos.
Renderizado del Nombre de Usuario:

Configurar el renderizado únicamente de los nombres de usuario en un contenedor limitado.
Manejo de Extensión del Nombre de Usuario:

Implementar la visualización de tres puntos (...) cuando la extensión del nombre de usuario supere el límite del contenedor establecido.
Comportamiento Responsivo de la Barra de Búsqueda:

Garantizar que, al reducir el tamaño de la pantalla, la barra de búsqueda se ajuste adecuadamente sin perder un margen de al menos 40px.

[CBarreraB]

Mejora de Estilo en Menú Hamburguesa - Efecto Hover

Descripción:
Se busca mejorar la experiencia visual en el menú hamburguesa mediante la implementación de un efecto hover específico. A continuación, se detallan los cambios necesarios:

Efecto Hover en Rojo:

Al señalar un campo en el menú hamburguesa, se debe aplicar un cambio de color a rojo para mejorar la visibilidad y destacar la selección.
Negrita en Hover:

Durante el efecto hover, se requiere que el texto del campo seleccionado se presente en negrita para resaltar aún más la elección del usuario.
Ampliación del 10% en Hover:

Implementar una ampliación del 10% en el tamaño del texto o ícono del campo seleccionado al realizar el hover, proporcionando una respuesta visual interactiva.

[CBarreraB]

Se tendra que evaluar porque se esta mostrando la barra de categorias como se expone segun la issue (#141)

[CBarreraB]

⛔ No cerrar la Issue hasta no tener terminada la funcionalidad del login de Usuario.

[CBarreraB]

Mejora del Navbar para Optimizar la Experiencia del Usuario

Descripción:

Se propone realizar modificaciones en el navbar con el objetivo de mejorar la experiencia del usuario. Las mejoras incluyen una optimización en el renderizado del logo, utilizando las imágenes SVG ubicadas en la carpeta public/images/logo. Se utilizará la imagen logoD.svg para dispositivos de escritorio y logoM.svg para dispositivos móviles. Además, se realizará un cambio en el color del logo a blanco cuando el modo oscuro esté activado.

Cambios Propuestos:

• Optimización del renderizado del logo utilizando las imágenes logoD.svg y logoM.svg para dispositivos de escritorio y móviles respectivamente.
• Cambio del color del logo a blanco cuando el modo oscuro esté activado.
• Se irán realizando ajustes y mejoras de acuerdo al avance en la funcionalidad y experiencia del usuario.

Notas Adicionales:

Es importante realizar pruebas exhaustivas en diferentes dispositivos y condiciones para asegurar que los cambios propuestos mejoren la experiencia del usuario de manera efectiva.

Se aceptarán sugerencias y ajustes a medida que se avance en la implementación para garantizar el cumplimiento de los objetivos.

Por favor, proceder con la implementación de los cambios propuestos y realice ajustes según sea necesario para mejorar la experiencia del usuario en el navbar. Estoy disponible para cualquier pregunta o aclaración adicional que necesite el equipo de desarrollo.

[CBarreraB]

Mejora del Hover para Adaptabilidad en Modo Oscuro y Claro

Descripción:

Se propone la modificación del efecto hover para una mejor adaptabilidad a los modos oscuro y claro de la aplicación. En lugar de cambiar el color del texto, se implementará una mejora visual mostrando un cuadro de fondo en nuestro color primario al pasar el cursor sobre los elementos. Esta mejora tiene como objetivo ofrecer una experiencia de usuario más consistente y agradable, independientemente del modo de visualización utilizado.

Cambios Propuestos:

• Modificar el efecto hover para mostrar un cuadro de fondo en nuestro color primario al pasar el cursor sobre los elementos.
• Asegurar que el nuevo efecto hover se ajuste de manera adecuada tanto en el modo oscuro como en el claro, proporcionando una experiencia visual coherente en ambos modos.
• Realizar pruebas exhaustivas para verificar que el efecto hover funcione correctamente en diferentes situaciones y dispositivos.

[CBarreraB]

Reducción del Tamaño del Icono del Menú Hamburgesa

Descripción:

Se solicita reducir el tamaño del icono del menú hamburgesa, ya que visualmente se percibe demasiado grande en comparación con el logo, lo que le resta protagonismo. Se pide ajustar su tamaño aproximadamente como se muestra en la gráfica del lado derecho para lograr un equilibrio visual y una mejor armonía en el diseño.