Hi everyone,
I really need some help with this ion-controller things in React.
This is the issue:
I wanted to have a Menu (hamburger) which when I clicked on, open the Menu for me including pages I can navigate to.
I don’t know how should I use the open() on click event function in my IonButton components to be able to show my menu list. I tried a couple of ways but didn’t go anywhere.
Here is the code I wanted to use:
const Menu: React.FC = () => {
return (
<>
<IonMenu side="start" menuId="first">
<IonHeader>
<IonToolbar color="primary">
<IonTitle>Start Menu</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
</IonList>
</IonContent>
</IonMenu>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton autoHide={false} onClick={() => DO Some magic with open() to open the IonMenu}></IonMenuButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonRouterOutlet></IonRouterOutlet>
</>
)
The CLI menu template has the menu on the side which is always stays on the side and open, I need to have a menu sign which when I click on it appear on the side like the one in https://ionicframework.com/docs/api/menu example (the hamburger menu)
Thanks @jjdev for suggesting the solution but this is not the one I’m looking for. Actually the ion-split-pane doesn’t work either for the scenario I’m looking for.
The issue is I don’t how I’m supposed to use “open” method on the ion-menu.
For Angular or JS, there are controller to be used to create a dynamic menu but for React I couldn’t get or find any examples to show the correct way to show how to use “open” method. I have the same issue with the “present” method on the ion-popover and popover handler
@aaronksaunders “ion-menu-controller” doesn’t work in React. Instead of this, React has its own handler I guess, based on the “menu” example in Ionic site, which is “IonRouterOutlet” that is not working as well
I’m not sure exactly what you are trying to do either use the menu controller to control menus or use a button to open the menu.
If the second one is the case, this is the structure I am using that seems to work: Note the use of contentId=""
Thanks @AceLondon for your solution. I want exactly something like the menu instance on the https://ionicframework.com/docs/api/menu page (for ionic react platform), has a hamburger menu icon which once I clicked on it opens up the menu options for me on the side.
Could you please explain to me what “Home” does in your example?
I know this is an old post but the solutions above might not have worked for anyone else (like me). But after googling and trying a bit more, this one worked for me and might be useful for somebody else.
The contentId in the <IonMenu> must be the same as the id in the tag for the toolbar, which is <IonPage> in my example.