I tried putting example code in stackblitz, but the member-detail page is not displaying correctly (the header/toolbar is chopped off, so no back button), even though it looks right when I build/run the same code on my machine.
https://ionic-angular-v5-master-detail.stackblitz.io
I was able to get a master/detail view working as I’d like on a small device, with an overlay main menu and the Members and Member Detail pages switching back and forth.
However, when it’s on a larger screen, I’d like both the Member and the Member Detail pages to show on the screen, along with the main menu. I can get this to work as I’d like by making the detail view a child route of the member one and adding an ion-router-outlet; however with this layout, it will no longer work properly on small screens. (There is a NOTE in members-routing.module.ts to describe the changes needed to have it act as expected on large screens.)
I also tried nesting a second split view as the ion-content of the main split view, but wasn’t surprised when that didn’t work. Is there a way to get it to work as I’d like in both a wide browser and a small phone?
I’m willing to change the design if necessary (but not preferred), but haven’t been able to get any of my ideas to work completely. For example, I put my main menu in tabs and put the split pane within that. It mostly worked, except that the second set of tabs on the detail page used absolute urls instead of relative ones for some reason (even though when they are the only set of tabs in the app, they use relative urls as expected.)
Is it possible to somehow update the routes at runtime, given media queries? Is there a better UI that I just haven’t thought of? Thanks for any suggestions.