From c08f73400ce331cf8cd94d1dc46febf1b75667f0 Mon Sep 17 00:00:00 2001
From: Ricardo Gonzalez <herrmonkey@gmail.com>
Date: Fri, 22 May 2026 22:52:44 -0500
Subject: [PATCH] =?UTF-8?q?Header:=20transici=C3=B3n=20fluida=20al=20colap?=
 =?UTF-8?q?sar=20sidebar=20(CSS=20variable=20+=20group-has)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- h-(--header-height) en vez de h-12 hardcodeado
- transition-[width,height] ease-linear para animación
- data-[orientation=vertical]:h-4 en Separator
- h1 en vez de Breadcrumb (más limpio, estilo demo)
- Layout simplificado sin div anidado redundante
---
 src/App.vue                 | 29 ++++++++++++-----------------
 src/views/DashboardView.vue |  4 ++--
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b6fa0a0..7c730f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,12 +4,6 @@ import { useAuthStore } from '@/stores/auth'
 import { useProjectsStore } from '@/stores/projects'
 import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
 import { Separator } from '@/components/ui/separator'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-} from '@/components/ui/breadcrumb'
 import AppSidebar from '@/components/AppSidebar.vue'
 import LoginView from '@/views/LoginView.vue'
 import DashboardView from '@/views/DashboardView.vue'
@@ -44,19 +38,20 @@ onMounted(() => {
     <AppSidebar v-model:active-tab="activeTab" />
 
     <SidebarInset>
-      <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
-        <SidebarTrigger class="-ml-1" />
-        <Separator orientation="vertical" class="mr-2 h-4" />
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbPage>{{ tabTitles[activeTab] }}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
+      <header class="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+        <div class="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+          <SidebarTrigger class="-ml-1" />
+          <Separator
+            orientation="vertical"
+            class="mx-2 data-[orientation=vertical]:h-4"
+          />
+          <h1 class="text-base font-medium">
+            {{ tabTitles[activeTab] }}
+          </h1>
+        </div>
       </header>
 
-      <main class="flex-1 p-6">
+      <main class="flex flex-1 flex-col p-4 pt-0 md:gap-6 md:py-6">
         <DashboardView v-if="activeTab === 'dashboard'" />
         <CalendarView v-else-if="activeTab === 'calendar'" />
         <SchedulerView v-else-if="activeTab === 'scheduler'" />
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index c562cf1..91bc5b8 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -18,8 +18,8 @@ const project = computed(() => projects.selected)
 </script>
 
 <template>
-  <div v-if="project" class="flex flex-1 flex-col gap-4">
-    <div class="flex items-center justify-between">
+  <div v-if="project" class="@container/main flex flex-1 flex-col gap-2">
+    <div class="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
       <div>
         <h1 class="text-2xl font-bold tracking-tight">{{ project.name }}</h1>
         <div class="flex items-center gap-2 mt-1">