Close menu before navigation

Ionic Framework
#1

Hi,

I am using Ionic v6 with the split-pane mode and when the side menu is enabled (device too small for split-pane mode) I have a bug where the menu won’t close before navigating to a new page, or worse, if I click on the link of the page I’m already on, nothing happen.

Here is the code:


<IonSplitPane when="md" contentId="main-content">
     <IonMenu content-id="main-content" type={"reveal"}>
            <IonHeader>
                <IonToolbar color={"warning"}>
                    <IonRouterLink color={"light"} slot={"start"}
                                   routerLink={"/"}><IonTitle
                        className={"ion-text-nowrap"}>App</IonTitle></IonRouterLink>
                </IonToolbar>
            </IonHeader>

            <IonContent>
                <IonList lines={"full"}>
                    <IonItem button routerLink={"/"} detail={false}>
                        <IonIcon src={home} slot={"start"}/>
                        <IonLabel>
                            <Trans i18nKey={"pages.home.title"}>Home</Trans>
                        </IonLabel>
                    </IonItem>
                    <IonItemDivider><Trans i18nKey={"menu.dividers.info"}>Info</Trans></IonItemDivider>
                    <IonItem button routerLink={"/infos"} detail={false}>
                        <IonIcon src={informationCircle} slot={"start"}/>
                        <IonLabel>
                            <Trans i18nKey={"pages.infos.title"}>Information</Trans>
                        </IonLabel>
                    </IonItem>
            </IonContent>
    </IonMenu>
    <div className="ion-page" id="main-content">
    </div>
</IonSplitPane>

Am I doing something wrong ?

thanks

#2

Found the solution, needed to put IonMenuToggle inside List to close menu upon navigation

We can see how to make a good Router code in the Ionic example: