wip

src/v2/core/HeaderDrawerManager.ts

@@ -0,0 +1,47 @@
+export class HeaderDrawerManager {
+  private drawer!: HTMLElement;
+  private spacer!: HTMLElement;
+  private expanded = false;
+  private readonly expandedHeight = 24;
+  private readonly duration = 200;
+
+  init(container: HTMLElement): void {
+    this.drawer = container.querySelector('swp-header-drawer')!;
+    this.spacer = container.querySelector('swp-header-spacer')!;
+  }
+
+  toggle(): void {
+    this.expanded ? this.collapse() : this.expand();
+  }
+
+  expand(): void {
+    if (this.expanded) return;
+    this.expanded = true;
+    this.animate(0, this.expandedHeight);
+  }
+
+  collapse(): void {
+    if (!this.expanded) return;
+    this.expanded = false;
+    this.animate(this.expandedHeight, 0);
+  }
+
+  private animate(from: number, to: number): void {
+    const keyframes = [
+      { height: `${from}px` },
+      { height: `${to}px` }
+    ];
+    const options: KeyframeAnimationOptions = {
+      duration: this.duration,
+      easing: 'ease',
+      fill: 'forwards'
+    };
+
+    this.drawer.animate(keyframes, options);
+    this.spacer.animate(keyframes, options);
+  }
+
+  isExpanded(): boolean {
+    return this.expanded;
+  }
+}