La interfaz presentada exhibe una estructura de navegación adaptable, diseñada para optimizar la experiencia del usuario en diversos dispositivos. Se observa una barra de navegación superior (“shell-nav”) que se ajusta a las dimensiones de la pantalla, ocultándose en dispositivos de escritorio durante el proceso de inicio de sesión (“desktop-login”).
El logotipo, identificado por el elemento “shell-nav__logo”, incorpora un icono vectorial (“svg”) con un relleno morado (#9147ff), manteniendo esta tonalidad incluso en el modo oscuro (“dark-theme”). La barra de navegación incluye enlaces (“shell-nav__link”) con indicadores visuales (“::after”) que varían en ancho según su función: descubrimiento, exploración y seguimiento. La opción de seguimiento (“shell-nav__link–follow”) permanece oculta hasta que el usuario haya iniciado sesión (“logged-in”).
Un componente de búsqueda (“shell-nav__search”) está presente, aunque inicialmente oculto, y se expande hasta un máximo de 40rem de ancho. En la parte derecha de la barra de navegación, se encuentra un área para la información del usuario (“shell-nav__user-card”), que incluye un avatar circular (“shell-nav__user-card-avatar”) con un fondo semitransparente. Se ofrecen botones para iniciar sesión (“shell-nav__user-auth-button–login”) y registrarse (“shell-nav__user-auth-button–singup”) cuando el usuario no ha accedido a la plataforma.
Además, se implementa un indicador de carga (“shell-loader”) que utiliza un spinner animado para proporcionar retroalimentación visual durante los procesos de carga. Este spinner, con un diseño circular y bordes definidos, gira continuamente para indicar actividad. La apariencia del spinner se adapta al modo oscuro, cambiando el color del borde izquierdo.
La adaptabilidad del diseño es evidente en las reglas de media queries, que ocultan la barra de búsqueda en pantallas con un ancho máximo de 1023px y la lista de enlaces en pantallas con un ancho máximo de 767px, optimizando la visualización en dispositivos móviles.
