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 dispositivos 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, colour 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 una línea de 0.4rem de altura y un colour de fondo rgba(0,0,0,.2) en el tema claro, que cambia a rgba(255,255,255,.2) en el tema oscuro. Los enlaces «Descubrir», «Navegar» y «Seguir» 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 elipsis (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 junto a las opciones de autenticación del usuario (shell-nav__user-auth), que se ocultan cuando el usuario ha iniciado sesión.
Los botones de «Iniciar Sesión» y «Registrarse» (shell-nav__user-auth-button--login y shell-nav__user-auth-button--singup respectivamente) tienen un ancho específico (5.2rem y 6.1rem) y un efecto visual de subrayado similar al de los enlaces de navegación.
Se incluye un cargador (shell-loader) que inicialmente está oculto (opacidad 0) y utiliza una animación para mostrarse gradualmente. El cargador contiene un spinner (shell-loader__spinner) que gira continuamente.
La apariencia de la barra de navegación y el cargador se adaptan a diferentes tamaños de pantalla, ocultando la lista de enlaces en pantallas con un ancho máximo de 767px y la barra de búsqueda en pantallas con un ancho máximo de 1023px.
También te puede interesar