My project structure works roughly like this:
<Header>
<Pages>
<PageA/ >
<PageB />
</Pages>
Both have a shared that dynamically shows/hides a menu button and a back button.
Page A has a menu
Page B has a back button
When I’m on Page A i can click the menu button and show/hide the menu. Then I navigate to Page B, click the “Back” button and return to Page A.
Now the menu button no longer works.
It appears that when I click the ‘menu’ button, the menuController is showing the menu as disabled. Does anyone know why the menu would be disabled? I can see in the DOM that the menu-enabled class is removed when I navigate away from the page, but it does not become enabled again when I return to the page.
A workaround I have found (but I believe it should be fixed) is to wrap my openMenu click handler in a promise that re-enables the menu item. This still looks a little glitchy though.
const handleMenu = () => {
menuController.enable(true).then(() => {
menuController.open();
});
};