RouterOutlet wiring and Menu off-screen hiding

This is a routing I came up supporting tricky contextual authentication and numerous pages.
And I am having a trouble with assigning proper ids around, so I kept it main to be safe

My main container renders this:

                {/*Pages*/}
                <IonContent id="main">
                    <IonSplitPane contentId="main">
                        <IonMenu contentId="main" type="overlay">
                            <IonList/>
                        </IonMenu>

                        <IonPage id={"main"}>
                            {filteredRoutes.map((prop, key) => (
                                <Route path={prop.layout + prop.path} component={prop.component} key={key} />
                            ))}
                            <Route exact path={`/home/profile`} component={ProfilePage} />
                            {/*<Redirect exact from={`/`} to={"/home/profile"} />*/}
                        </IonPage>
                    </IonSplitPane>

And every and each page starts with, yes, with redundant on top

<IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonButtons slot="start">
                        <IonMenuButton />
                    </IonButtons>
                    <IonTitle>Title</IonTitle>
                </IonToolbar>
            </IonHeader>

            <IonContent>

What do you think I could improve here with id contentId properties ?
Is there anything that could be contributing to the bug where I can’t tap off-menu to close it ?
Happy New Year everybody!

1 post - 1 participant

Read full topic