Nexus – Header Configuration

image_pdfimage_print

¿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”.