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

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);
   }
 }