[bug]: Post Header - megadropdown position and menu after resize

[myrta2302]

🐞 Describe the bug

1. When viewing the application on mobile or tablet, if a user opens a megadropdown within the PostHeader and then resizes the window to desktop size before resizing back down to a mobile/tablet size, the megadropdown's positioning is incorrect.

This is probably addressed by this PR: #5490

2. When a user opens a megadropdown in desktop size, then the resizes the window to a tablet/mobile breakpoint (which closes the megadropdown), and subsequently opens the mobile menu, the megadropdown retains its previous expanded state from the desktop view.

🛠️ To Reproduce

Steps to reproduce the behavior:

1. Set the browser viewport size to a mobile/tablet.
2. Interact with the PostHeader to open a megadropdown.
3. Resize the browser window to a desktop size.
4. Resize the browser window back down to a mobile/tablet size.
5. Observe the position of the megadropdown.

✨ Expected behavior

1. When resizing back from desktop to table breakpoint, the megadropdown should be closed and if opened again it should be correctly positioned for the mobile/tablet layout, starting from the bottom of the header.
2. When the mobile menu is opened after the resize from desktop, all nested menus (like megadropdowns) should be in their default, collapsed state.

📷 Screenshots

💻 Desktop

• Browser: Edge/Safari