Hello
This is my first post. I’ve encountered a problem - tried for 3 days, could’nt solve it. hence seeking help here.
scenario -
Different Ion menu is made for each tab
has separate contentId and matched with the 's id.
has a menuId as well matched with 's menu parameter (which located in a separate component)
problem -
when going to a particular tab page and going back to previous tab page.
the menu button is not working/ available.
Search for fix.
fix solutions/ workaround available for ionic-angular. replicated for ionic react
Multiple Side Menus With Ionic Tab Bar
watch from ( 12:10 to 16:30 ) for problem and work around.
I did tried menuController usage similar to that mentioned (by user- 76Black) in the post here
Attempt to fix - Code Snippet
routes_page (containing the menu contents and IonRouterOutlet) are kept separate from the component that is rendered.
in the routes_page.tsx
// necessary imports here.
const route_Tools: React.FC = () => {
return (
<React.Fragment>
<IonMenu menuId="toolsMenu" contentId="tools" id="idtools">
<IonHeader>
<IonToolbar>
<IonTitle>Tools Menu</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonMenuToggle menu="toolsMenu">
<IonItem button routerLink="/tools/notepad" routerDirection="none">
<IonIcon icon={create}></IonIcon>
<IonLabel>Notepad</IonLabel>
</IonItem>
<IonItem button routerLink="/tools/calculator" routerDirection="none">
<IonIcon icon={calculator}></IonIcon>
<IonLabel>Calculator</IonLabel>
</IonItem>
</IonMenuToggle>
</IonList>
</IonContent>
</IonMenu>
<IonRouterOutlet id="tools">
<Redirect path="/tools" to="/tools/home" exact />
<Route path="/tools/home" >
<Toolspage />
</Route>
<Route path="/tools/notepad" >
{/* <Tool_notepad /> */}
</Route>
<Route path="/tools/calculator" >
{/* <Tool_calculator /> */}
</Route>
</IonRouterOutlet>
</React.Fragment>
)
};
export default route_Tools;
And in the component page tsx which is rendered.
menuController.enable(true,“menuId”) is used within useIonViewWillEnter() method to execute when ever the page is about to load.
//other imports before as necessary
import { menuController } from '@ionic/core';
const ToolsPage: React.FC = () => {
useIonViewWillEnter(async() => {
await menuController.enable(true,"toolsMenu")
})
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton menu="toolsMenu" ></IonMenuButton>
</IonButtons>
<IonTitle>Tools Menu page</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{/* page content here */}
</IonContent>
</IonPage>
);
};
export default ToolsPage;
similar setup done for the other tab page also.
Issue remains -
Menu does load the first time and but not so when navigating back.
also Im facing a side effect issue when using the menuController.enable() function
when loading the page directly to one of the tab page instead via tab button’s navigation.
browser throws an error
Unhandled Rejection (TypeError): menu.componentOnReady is not a function
ToolsPage/<
src/common/tools/main/pages/ToolsPage.tsx:29
26 |
27 | useIonViewWillEnter(async() => {
28 | // menuCtrl.enable(true,"toolsMenu")
> 29 | await menuController.enable(true,"toolsMenu")
30 | ^ })
31 |
Am I doing this correctly? please assist.