Nexus – Header Configuration

¿Qué es?

Header Configuration es una de las secciones de configuración general del proyecto en Nexus (fuera del editor de pantallas), ubicada en una barra de pestañas junto a Screens, Footer Configuration, Theme Configuration, Users, API Keys, Variables, Gateway y Activity Logs. Permite definir el header (encabezado) que se muestra en todas las pantallas del proyecto, con su logo, título, colores, menú de navegación y perfil de usuario.

Propiedades

• Logo URL: campo de texto para la URL del logo (placeholder “https://example.com/logo.png”), con un botón Upload Logo para subir una imagen en lugar de pegar una URL.
• Header Title: texto que se muestra como título en el header (ej. “test one”).
• Background Color: color de fondo del header (color picker + campo de texto con código hexadecimal, ej. “#ffffff”).
• Text Color: color del texto del header (color picker + campo de texto con código hexadecimal, ej. “#000000”).
• Preview: vista previa en vivo del header, que se actualiza a medida que se cambian los valores anteriores.
• Menu Position: selección de dónde se ubica el menú de navegación. Opciones (radio buttons):

  • In Header: el menú aparece integrado dentro de la barra del header, en la misma línea horizontal que el logo/título.
  • In Aside: el menú se ubica aparte, en una barra lateral (aside), normalmente a la izquierda de la pantalla.

• Menu Items: lista de ítems del menú de navegación. Con el botón + Add Menu Item se agrega un nuevo ítem, compuesto por:

  • Label: texto del ítem de menú (placeholder “Menu Label”).
  • Icon (optional): selector de ícono para el ítem (ej. 🏠).
  • Botón de eliminar (ícono X en rojo) para quitar el ítem.
  • Link Type: a qué apunta el ítem de menú. Opciones (radio buttons):

    • Screen
    • Custom URL

  • Select Screen: (solo si Link Type = Screen) menú desplegable que lista las pantallas creadas en el proyecto (ej. “testtree (testtree)”, “testtwo (testtwo)”, “testone (testone)”).

• Show User Profile in Header: casilla que muestra u oculta, en el header, el ícono de perfil del usuario logueado (un círculo de color con su inicial).
• Reset: botón para descartar los cambios no guardados.
• Save Configuration: botón para guardar la configuración del header.

Ejemplo de uso

Para armar un header con menú de navegación hacia las pantallas del proyecto, se configura el Logo URL y/o Header Title, se eligen los colores deseados, y luego en Menu Items se agrega un ítem por cada sección a la que se quiera poder navegar, eligiendo Link Type “Screen” y seleccionando la pantalla correspondiente en Select Screen (por ejemplo, un ítem “Inicio” apuntando a la pantalla “testone”). Si en cambio se quiere enlazar a una URL externa, se elige Link Type “Custom URL”.