From d976d31f1445f41bc62222597077a6b227b40874 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Thu, 18 Dec 2025 00:19:43 +0100
Subject: [PATCH] Enhances navigation animation with header drawer support

Updates NavigationAnimator to animate header drawer during slide transitions

Adds optional header drawer animation to improve UI consistency when navigating between views
---
 src/core/CalendarApp.ts        |  3 ++-
 src/core/NavigationAnimator.ts | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/core/CalendarApp.ts b/src/core/CalendarApp.ts
index 3820e0b..246b257 100644
--- a/src/core/CalendarApp.ts
+++ b/src/core/CalendarApp.ts
@@ -59,7 +59,8 @@ export class CalendarApp {
     // Create NavigationAnimator with DOM elements
     this.animator = new NavigationAnimator(
       container.querySelector('swp-header-track') as HTMLElement,
-      container.querySelector('swp-content-track') as HTMLElement
+      container.querySelector('swp-content-track') as HTMLElement,
+      container.querySelector('swp-header-drawer')
     );
 
     // Render time axis from settings
diff --git a/src/core/NavigationAnimator.ts b/src/core/NavigationAnimator.ts
index e44b08b..cf173ad 100644
--- a/src/core/NavigationAnimator.ts
+++ b/src/core/NavigationAnimator.ts
@@ -1,7 +1,8 @@
 export class NavigationAnimator {
   constructor(
     private headerTrack: HTMLElement,
-    private contentTrack: HTMLElement
+    private contentTrack: HTMLElement,
+    private headerDrawer: HTMLElement | null
   ) {}
 
   async slide(direction: 'left' | 'right', renderFn: () => Promise<void>): Promise<void> {
@@ -14,7 +15,7 @@ export class NavigationAnimator {
   }
 
   private async animateOut(translate: string): Promise<void> {
-    await Promise.all([
+    const animations = [
       this.headerTrack.animate(
         [{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
         { duration: 200, easing: 'ease-in' }
@@ -23,11 +24,22 @@ export class NavigationAnimator {
         [{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
         { duration: 200, easing: 'ease-in' }
       ).finished
-    ]);
+    ];
+
+    if (this.headerDrawer) {
+      animations.push(
+        this.headerDrawer.animate(
+          [{ transform: 'translateX(0)' }, { transform: `translateX(${translate})` }],
+          { duration: 200, easing: 'ease-in' }
+        ).finished
+      );
+    }
+
+    await Promise.all(animations);
   }
 
   private async animateIn(translate: string): Promise<void> {
-    await Promise.all([
+    const animations = [
       this.headerTrack.animate(
         [{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
         { duration: 200, easing: 'ease-out' }
@@ -36,6 +48,17 @@ export class NavigationAnimator {
         [{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
         { duration: 200, easing: 'ease-out' }
       ).finished
-    ]);
+    ];
+
+    if (this.headerDrawer) {
+      animations.push(
+        this.headerDrawer.animate(
+          [{ transform: `translateX(${translate})` }, { transform: 'translateX(0)' }],
+          { duration: 200, easing: 'ease-out' }
+        ).finished
+      );
+    }
+
+    await Promise.all(animations);
   }
 }