diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx index 01fa94263b..1639cc87d8 100644 --- a/packages/components/src/components/post-header/post-header.tsx +++ b/packages/components/src/components/post-header/post-header.tsx @@ -14,6 +14,7 @@ type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null; export class PostHeader { private scrollParent = null; private mobileMenu: HTMLElement; + private mobileMenuAnimation: Animation; private throttledScroll = () => this.handleScrollEvent(); private throttledResize = throttle(50, () => this.handleResize()); @@ -42,13 +43,14 @@ export class PostHeader { async toggleMobileMenu() { if (this.device === 'desktop') return; - if (this.mobileMenuExtended) { - await slideUp(this.mobileMenu).finished; - } else { - slideDown(this.mobileMenu); - } + this.mobileMenuAnimation = this.mobileMenuExtended + ? slideUp(this.mobileMenu) + : slideDown(this.mobileMenu); + // Toggle menu visibility before it slides down and after it slides back up + if (this.mobileMenuExtended) await this.mobileMenuAnimation.finished; this.mobileMenuExtended = !this.mobileMenuExtended; + if (!this.mobileMenuExtended) await this.mobileMenuAnimation.finished; } private handleScrollEvent() { @@ -95,13 +97,22 @@ export class PostHeader { if (width >= 1024) { newDevice = 'desktop'; - this.mobileMenuExtended = false; // Close any open mobile menu } else if (width >= 600) { newDevice = 'tablet'; } else { newDevice = 'mobile'; } + // Close any open mobile menu + if (newDevice === 'desktop' && this.mobileMenuExtended) { + this.toggleMobileMenu(); + this.mobileMenuAnimation.finish(); // no animation + + + const menuToggler = this.host.querySelector('post-togglebutton'); + if (menuToggler) menuToggler.toggled = false; + } + // Apply only on change for doing work only when necessary if (newDevice !== previousDevice) { this.device = newDevice;