Navegación Twitch: Diseño y Funcionalidades

by Editor de Mundo

La interfaz presenta una barra de navegación superior con una altura de 5rem y un ancho que ocupa el 100% del espacio disponible. Esta barra, de fondo blanco en su configuración estándar, cambia a un tono más oscuro (#18181b) cuando se activa el modo oscuro.

El logotipo, ubicado en la parte superior izquierda, utiliza el color #9147ff tanto en su versión estándar como en la de tema oscuro. La barra de navegación incluye enlaces para «Descubrir», «Explorar» y «Seguir», cada uno demarcado visualmente con una línea inferior de diferentes longitudes (6.9rem, 5.9rem y 7.6rem respectivamente). La opción «Seguir» permanece oculta a menos que el usuario haya iniciado sesión.

Un campo de búsqueda, inicialmente oculto, puede expandirse hasta un máximo de 40rem de ancho. En el extremo derecho, se encuentra una sección para el usuario, que muestra un avatar circular de 3rem de diámetro con un fondo semitransparente (#050505 o #ffffff dependiendo del tema). Si el usuario no ha iniciado sesión, se muestran botones para «Iniciar Sesión» y «Registrarse».

La interfaz también incorpora un indicador de carga (shell-loader) que se centra vertical y horizontalmente en la pantalla. Este indicador utiliza un spinner circular que gira continuamente, con un borde superior de color gris claro (#ccc) y un borde izquierdo que cambia a #19171c en el tema oscuro. La animación del spinner se basa en una rotación de 360 grados.

La disposición de la barra de navegación se adapta a diferentes tamaños de pantalla. En pantallas con un ancho máximo de 1023px, el campo de búsqueda se oculta. En pantallas aún más pequeñas, con un ancho máximo de 767px, la lista de enlaces de navegación desaparece, simplificando la interfaz.

leer más  Europa busca su independencia energética

You may also like

Leave a Comment

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.