mirror of
https://github.com/Pandipipas/scoreko-dev.git
synced 2026-06-06 11:42:06 +00:00
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:
@@ -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">
|
||||
Control Panel
|
||||
</QToolbar>
|
||||
<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
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user