Hi everyone,
I am working on a relatively complex project that should be working on phones and tablets. At this point we are not considering separating the project in two codebase for each type of device, but even if we did I am not sure we could achieve what we need. Here is what I have been trying to do:
We are using a global left side menu to navigate to different major “states” of the app, tabs are not appropriate for this as there are too many “major” states to fit in a tab bar, and there will be more in the future. As a practical example, one of the side menu option is “Messages”, on phone that is a page displaying the list of conversations you had, and clicking on one of these conversations leads you to the messages exchanged with the correspondants. This is working exactly like we would expect on a phone, but the tablet view is more challenging.
On tablet, the messages should display a view split in two, where the left part displays the conversations, and the right part the messages. I succeeded in implementing a splitview using basic ui-view references to avoid the navigation effects from Ionic, but now my phone view is broken. Obviously it is possible to duplicate a fair amount of code to handle both devices but that is not the right way of solving this issue. Further more, I tried to re-use ion-nav-bar + ion-nav-view in my custom split view to try handle sub navigation within the “messages” pane for instance, but that caused the main nav bar to disappear, and other issues.
I also tried to implement a side-menu within the other side menu, but not only that would hide the main side-menu for ever, and the button to open the menu will conflict. Not to mention that the side-menu is not what we want on phone as re-opening the menu to pick a conversation is not a common design pattern.
Has anyone experienced this?
How would you solve this problem?
Thanks in advance!
Cheers,
Fred