Combining ion-side-menu and ion-tabs in 1 template?

ionic-v1
1

Hello guys,

I am currently trying to implement a view that have both side menu and tabs. One example could be like in Facebook application, there is a side menu in the rightside.

The problem I have is that since the ion-tabs also provide it’s own view, so it override the view made by ion-side-menu.

I was successfully re-show the view made by side menu by remove this div

<div class="pane">
    </div>

and remove the view class in this.

<ion-tabs class="tabs-s42-bottom tabs-icon-only view">

I tried programmatically remove this using on-select or by ng-click.

  1. ng-click: it does remove both but only when you click to the tab. It does not remove when the program start since there are no element available at that time before ionic render.

  2. on-select: This function run when ionic render the tab and it select the first element. Works good to remove the class view in ion-tabs, however it does not remove the div pane since this div render later than the function call.

Before remove:

After remove:

My plan to handle tab’s view is to do it programmatically.
Was there anyone able to combine both of them? What is your approach?

2

I got it to work like so.

1 Like
3

Hello @mhartington please i would like to achieve this {tabs and side menu} now i have a all my templates externally which i serve in the ion-view. Please i find difficulty adding a side-menu to load from templates folder into the ion-views.
Any help is appreciated
Thanks

4

With beta 14, is not really advised to do this anymore.
Before side-menus and tabs where not really tied to navigation, but that has changed.
Now each component is tightly tied to the navigation stack and combining them can be problematic.

5

OK thanks a million @mhartington,

6

What about sub navigation? Can I use a button bar that sets different routes (states) and navigate within a parent tab? I have successfully done it using ui-view to show and hide regions of the screen, but I cannot navigate forward and get a back button. When I use ion-nav-view it does not display correctly even though I use the ion-view, ion-content hierarchy. Can ion-nav-view work within another ion-view / ion-content?

Maybe if I used tabs on top within tabs on the bottom it would work?