From 2cebad244c866a1f35f9dc622a2bebabbdb1db32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Fri, 13 Dec 2024 14:09:52 +0100
Subject: [PATCH] fix(components): fix header transition from mobile to header
 (#4256)

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 .../components/post-header/post-header.tsx    | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

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<HTMLPostTogglebuttonElement>('post-togglebutton');
+      if (menuToggler) menuToggler.toggled = false;
+    }
+
     // Apply only on change for doing work only when necessary
     if (newDevice !== previousDevice) {
       this.device = newDevice;