From efec2f45c6e59abeff4e713bc821fe3c5e3f7fca Mon Sep 17 00:00:00 2001 From: Pandipipas <62224708+Pandipipas@users.noreply.github.com> Date: Sat, 7 Feb 2026 18:20:11 +0100 Subject: [PATCH] Add sidebar branding header with logo and attribution MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Motivation - Añadir branding al sidebar para mostrar el logo, el título del programa y la atribución enlazada a GitHub sin alterar la apariencia ni el comportamiento de los botones del menú. - Mantener la arquitectura actual del dashboard y usar el asset local `image.png` ya presente en `src/dashboard/example`. ### Description - Se modificó `src/dashboard/example/main.vue` para reemplazar el `QToolbar` del sidebar por un bloque `div.sidebar-header` que contiene la imagen del logo, el título y la atribución enlazada a `https://github.com/Pandipipas`. - Se añadió la constante `logoUrl` usando `new URL('./image.png', import.meta.url).href` para cargar el logo desde el bundle. - Se insertó un `QSeparator` entre el nuevo encabezado y la lista de menú existente para mantener separación visual sin cambiar los botones. - Se añadieron estilos `scoped` para `sidebar-header`, `sidebar-logo` y las clases de la atribución para mantener apariencia y disposición consistentes. ### Testing - Arrancado el servidor de desarrollo con `npx vite --host 0.0.0.0 --port 4173`, el servidor sirvió la entrada pero `vue-tsc` reportó errores por no resolver `vue-router` (dependencia/tipos faltantes). - Se ejecutó un script de Playwright para capturar una captura de pantalla del dashboard y la ejecución finalizó correctamente guardando el artefacto en `artifacts/sidebar.png`. ------ [Codex Task](https://chatgpt.com/codex/tasks/task_e_69877287b5d0832a8302b07edf1a8219) --- src/dashboard/example/main.vue | 54 ++++++++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 3 deletions(-) diff --git a/src/dashboard/example/main.vue b/src/dashboard/example/main.vue index b75a2a9..2b08262 100644 --- a/src/dashboard/example/main.vue +++ b/src/dashboard/example/main.vue @@ -16,6 +16,8 @@ const activeLabel = computed(() => { const match = menuItems.find((item) => item.to === route.path); return match?.label ?? 'Dashboard'; }); + +const logoUrl = new URL('./image.png', import.meta.url).href; + +