Lizandro GuarnizoandClaude Sonnet 5
ce5956878d
El SPA no tenía ningún tratamiento responsive: un sidebar fijo de 256px siempre visible. En un teléfono de 375px eso deja 119px para el contenido. Ahora en móvil el sidebar sale de flujo y entra deslizándose desde la izquierda, con botón en el header y fondo oscuro para cerrarlo. Se cierra solo al elegir un tenant: dejarlo abierto tapa justo la pantalla a la que se acaba de entrar. En escritorio (md+) no cambia nada — sigue fijo y sin botón. El estado vive en lib/ui.js porque lo tocan dos componentes que no son padre/hijo: el botón del header y el propio sidebar. También se achica el padding del contenido en pantallas chicas y las tabs del agente pasan a scrollear en su propia caja en vez de desbordar. Medido a 492px de ancho: scrollWidth igual a innerWidth y ningún elemento sobresaliendo. Escritorio verificado sin regresión. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
37 lines
1.3 KiB
Vue
37 lines
1.3 KiB
Vue
<script setup>
|
|
import Sidebar from './components/Sidebar.vue'
|
|
import { tema, alternarTema } from './lib/tema.js'
|
|
import { menuAbierto } from './lib/ui.js'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex">
|
|
<Sidebar />
|
|
<main class="flex-1 min-w-0 flex flex-col">
|
|
<header class="h-14 shrink-0 flex items-center gap-1 px-4 sm:px-6 border-b border-borde">
|
|
<!-- Solo en móvil: en escritorio el sidebar está siempre visible. -->
|
|
<button
|
|
class="btn-ghost !px-2 !py-1.5 md:hidden"
|
|
aria-label="Abrir menú"
|
|
@click="menuAbierto = true"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<span class="flex-1"></span>
|
|
<button
|
|
class="btn-ghost !px-2.5 !py-1.5"
|
|
:title="tema === 'oscuro' ? 'Cambiar a claro' : 'Cambiar a oscuro'"
|
|
@click="alternarTema"
|
|
>
|
|
<span class="text-base leading-none">{{ tema === 'oscuro' ? '☀️' : '🌙' }}</span>
|
|
</button>
|
|
</header>
|
|
<div class="flex-1 max-w-5xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 animate-aparecer">
|
|
<router-view />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|