App breaks if ion-menu is used as per docs, navigation breaks if not

[jcosta33]

Ionic version:
[x] 6.4.1

I'm submitting a ...

[x] bug report
[ ] feature request

Current behavior:
If I setup the navigation as is shown in the docs (https://ionicframework.com/docs/api/menu), this error will occur when navigating between pages:

This happens because ionic needs a single wrapper for the whole page in order to do the animations. If I change this structure to this:

then the navigation randomly stops working after jumping back and forward for a while but no errors are outputted.

Expected behavior:
The structure shown in the documentation should not lead to a fundamental flaw in the structure of the page.

Steps to reproduce:
Just try to use the navigation on a Vue Ionic app by following the documentation by the book. That should do it.

[liamdebeasi]

Thanks for the report. Do you have a code reproduction I can look at? The demos in https://ionicframework.com/docs/api/menu show how to use the component at the root of the application. If you are using the menu in a wrapped page that you route to, this component will need IonPage as noted in https://ionicframework.com/docs/vue/navigation#ionpage.

edit: We also have a troubleshooting entry for this issue that may be helpful: https://ionicframework.com/docs/vue/troubleshooting#page-transitions-are-not-working

[jcosta33]

Thanks for the report. Do you have a code reproduction I can look at? The demos in https://ionicframework.com/docs/api/menu show how to use the component at the root of the application. If you are using the menu in a wrapped page that you route to, this component will need IonPage as noted in https://ionicframework.com/docs/vue/navigation#ionpage.

edit: We also have a troubleshooting entry for this issue that may be helpful: https://ionicframework.com/docs/vue/troubleshooting#page-transitions-are-not-working

I've made changes to only have one global nav outside of any "navigateable" pages and it seems to be working ok. The issue here is that I wished to have 2 different levels of navigation that look different. Basically you can be in the root of the app or inside one of many contexts. This is what had me building the navigation in that way. It seems I'll have to use state management to modulate a singular navbar and hamburger menu instead of actually instantiating 2 for each scope. Thanks for the help, I think I can manage with this but it would be cool to have it a bit more flexible.

[liamdebeasi]

Thanks for the reply. I think this is similar to #18974. The errors appear to be slightly different, but I believe the underlying issues are related. I'll merge these two threads together. Let me know if you have any additional questions.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.