Master Detail SplitView on Tablet


#1

I’m trying to get the following layout working on tablet and am really struggling. So much so I’m starting to wonder if what I’m trying to achieve is beyond the current capabilities of the Ionic navigation structure as there is a fair bit of nesting going on. Hopefully the diagram is fairly self explanatory, but to give a bit of detail;

On wider (tablet) devices I’d like the UI Pattern to be Master Detail, with a level of categorisation on the master list. Essentially like mail works on iOS, where you can choose a Menu option, then an item from the submenu. The menu is animated, sliding in and out to replace / be replaced by the submenu, and the detail panel updates whenever a user chooses an item.

On mobile it’s a far easier pattern, which I’ve already got working without problem.

To then complicate the matter further, the whole thing is nested within a further sidemenu that allows top-level navigation of the app.

The problems I’m having are;

  1. Allowing the menu to transition into the submenu whilst retaining state for the detail panel.
  2. Keeping the section heading / Menu title / Submenu title all in sync - they seem to lose their state and get confused, showing the content from one view and title from another.
  3. Navigating in and out of the section using the top level side menu (via the burger menu) is inconsistent when it resets the state - sometimes it brings you back to the first Menu view, sometimes to the detail view you’ve drilled down to. I can’t seem to find the reproduction steps for each case to diagnose.

Is such a navigation type possible, or is it just too complicated for the ui-router in Ionic at the moment? Can anyone point me in the direction of a starter template / theme that has this type of navigation paradigm (I only need tablet, as the mobile version is working fine)

Thanks in advance for any help / pointers.