Side Menu and Tabs Navigation Structure


I started an ionic project with Side Menu template and I want to put in .

I structured it in such a way that is placed inside . Then in , I have one in each tab.

Here is the codepen.

In my case, Contacts has two tabs(All and Favorites) and it is placed in . I want to have a button at the right side of the nav bar to allow users to “Add” a contact but the button is not shown.

I have separate state, template and controller for each tab because I want to be able to navigate to specific tab from other pages.

Users can select one of the in to view detail of the selected contact. This state is placed in menuContent but this breaks the navigation and transition. Back button is not shown and transition is not shown.

What would be the best or ideal way to structure this? Please have a look at the comments in the code for more detail.