Navegación Twitch: Diseño y Funcionalidades

by Editor de Tecnologia

La interfaz presenta una barra de navegación superior (shell-nav) con un fondo blanco que cambia a #18181b en el tema oscuro. Esta barra se oculta en la vista de inicio de sesión de escritorio (desktop-login).

El logotipo, identificado como shell-nav__logo, utiliza un relleno superior e inicial de 1.3rem y muestra un SVG con relleno #9147ff, color que se mantiene en el tema oscuro.

La barra de navegación incluye enlaces (shell-nav__link) con un espaciado interno de 2rem y un efecto visual de subrayado con un fondo rgba(0,0,0,.2) en el tema claro, que se invierte a rgba(255,255,255,.2) en el tema oscuro. Enlaces específicos como «Descubrir» (discovery), «Explorar» (browse) y «Seguir» (follow) tienen subrayados de diferentes anchos (6.9rem, 5.9rem y 7.6rem respectivamente). El enlace «Seguir» está oculto por defecto y se muestra solo cuando el usuario ha iniciado sesión (logged-in).

Un elemento de menú elíptico (shell-nav__ellipsis) está presente pero oculto por defecto. Contiene un SVG con relleno rgba(255,255,255,0.4) y una altura de 2rem.

La barra de navegación también incluye un contenedor de búsqueda (shell-nav__search-container) que, aunque presente, está oculto por defecto y solo se muestra en pantallas con un ancho máximo de 1023px. Cuando visible, tiene un ancho máximo de 40rem, una altura de 3rem y un fondo rgba(255,255,255,.4).

En el extremo derecho, se encuentra la tarjeta de usuario (shell-nav__user-card) que contiene el avatar del usuario (shell-nav__user-card-avatar) con un tamaño de 3rem x 3rem y un fondo rgba(0,0,0,.05). El avatar se muestra a la derecha del bloque de autenticación del usuario (shell-nav__user-auth), que se oculta una vez que el usuario ha iniciado sesión.

leer más  ¿Por qué Yellowstone no emite dióxido de azufre (SO2)?

Para usuarios no autenticados, se ofrecen botones de «Iniciar Sesión» (login) con un ancho de 5.2rem y «Registrarse» (singup) con un ancho de 6.1rem. Estos botones tienen un efecto visual de subrayado similar al de los enlaces de navegación.

Finalmente, se incluye un cargador (shell-loader) que inicialmente está oculto (opacity:0) y utiliza una animación para mostrarse gradualmente. El cargador contiene un spinner (shell-loader__spinner) que gira continuamente.

La disposición de los enlaces de navegación se simplifica en pantallas más pequeñas (ancho máximo de 767px), ocultando la lista de enlaces (shell-nav__link-list).

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.