Add sidebar branding header with logo and attribution

### 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)
This commit is contained in:
Pandipipas
2026-02-07 18:20:11 +01:00
committed by GitHub
parent a40e583403
commit efec2f45c6
+50 -2
View File
@@ -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;
</script>
<template>
@@ -32,9 +34,29 @@ const activeLabel = computed(() => {
bordered
:width="220"
>
<QToolbar class="text-weight-bold">
<div class="sidebar-header q-pa-md">
<div class="row items-center no-wrap">
<img
:src="logoUrl"
alt="Logo"
class="sidebar-logo"
/>
<div class="q-ml-sm">
<div class="text-subtitle1 text-weight-bold">
Control Panel
</QToolbar>
</div>
<div class="text-caption text-grey-6">
<span class="by-label">by</span><a
class="by-link"
href="https://github.com/Pandipipas"
target="_blank"
rel="noopener"
>Pandipipas</a>
</div>
</div>
</div>
</div>
<QSeparator class="q-mb-sm" />
<QList>
<QItem
v-for="item in menuItems"
@@ -58,3 +80,29 @@ const activeLabel = computed(() => {
</QPageContainer>
</QLayout>
</template>
<style scoped>
.sidebar-header {
min-height: 72px;
}
.sidebar-logo {
width: 40px;
height: 40px;
object-fit: contain;
}
.by-label {
font-size: 0.75rem;
}
.by-link {
font-size: 0.75rem;
color: inherit;
text-decoration: none;
}
.by-link:hover {
text-decoration: underline;
}
</style>