Using sidemenu and tabs together


#1

i am trying ionic from past couple of days and i am trying to make an app with sidemenu and tabs together but i am not able to put it together

it should look something like this

Whatever i try i am not able to get it working all i managed to make was this http://codepen.io/anon/pen/CAsKn

which is far from what i intended above .

can anyone please help me and guide me in right direction can you please give some code samples to build upon
please help


Refresh Header On Login
#2

I forked your example and got the sidemenu working. It could use a little beautification. http://codepen.io/gnomeontherun/pen/tbvdH

You had the sidemenu inside of one of the tabs pages, where you wanted to put it as the root element and have the ion-nav-view load into the ion-side-menu-content directive. $ionSideMenuDelegate is now available and has to be used to trigger the sidemenu to open or close. I added a controller and openMenu() method that handles this.


#3

i think side menu is broken as one of its menu item is not visible


#4

The functionality is working, I just didn’t use the ion-header-bar component and so it didn’t add the padding. I updated my example http://codepen.io/gnomeontherun/pen/tbvdH


#5

Thanks @gnomeontherun. Do you know how to add a right hand side menu to the ionic-angular-cordova-seed project on github: https://github.com/driftyco/ionic-angular-cordova-seed without breaking the tabs or the back arrow history? Many have tried, all have failed. Any advice would be appreciated.


#6

@gnomeontherun thanks for help, here i managed to get it working in some way can you please have a look and give some guidance if i am doing it in right way


#7

@programming_kid you will want to add menu-close to your links in the left bar so it will close the side menu upon click/tap. You may also want to use nav-clear, but that depends on if you want the back button and animations or not.


#8

@mbyrne History is based on standard links. There is a new nav-clear directive that you can apply to any link that will stop the back button. I added it to the Home in the left side menu, so if you go somewhere and then Home, it won’t show the back arrow. http://codepen.io/gnomeontherun/pen/tbvdH


#9

thank you! I will check this out right now.


#10

So I have worked with what you posted and it is very useful. One question though is if I want something on the side menu, like a link to a Settings page, how would I define the state and view in the index.js?

You have the all the side menu links going to pages that exist only in the tab structure, how would I link to another non-tab page (that is, appended to index.html as a template called e.g. settings.html)?

I already created that page (it is viewable if I temporarily rename it as one of the tabs), changed the anchor in the side menu code <a class="item" menu-close href="#/search">Search</a> and tried to update the ui-router state provider in index.js but I think I have something about the syntax wrong with the link in the side menu and/or in the state provider. How would you write this

.state('search', { url: "/search", views: { 'search': { templateUrl: "search.html" } } })

to reference a page that is not on the tabs, but that is an html template within the index.html page?

I know I am doing something syntactically wrong because of my lack of understanding of ui-route and state and appreciate any guidance.


#11

I’m not an expert on ui-router either, haven’t used it until I started with Ionic last week. However I’ve updated my codepen to route to a new view not in the tabs. You can see I added two new states to the top (search and settings) and then added templates to the bottom of the HTML and updated the navigation.


#12

This is fantastic. One question though is that the tab disappears for the settings and search pages. How can I keep the same tabs for the side menu pages?


#13

Tabs are declared inside of the tabs abstract template. Since the search/settings views aren’t children of the tabs state, they won’t have the tabs. You would either have to make a tab that has multiple children states inside of it (sounds kind of tricky and delicate) or manually add tabs to the footer.

I think your best option is to make a footer that has the same icon/text links as the tabs, because the tab directive creates one pane per tab.


#14

All right, that gets to the heart of the issue with tabs and side menu. Manually adding a tab footer to each side menu page makes sense, but doesn’t seem very DRY. I think I will attempt to make a tab with multiple children and see how quickly I trainwreck things…
Again, I really appreciate the guidance and help.


#15

okay, so I tried manually adding the tab bar and that worked fine too.


#16

Awesome, to make it DRY make it a template and use ng-include.


#17

@mbyrne can u share pen for sidemenu with tabs pls


#18

I got this http://codepen.io/norman784/pen/Ahwdg but seems that ion-tabs but seems that it mess with the side menu and you got an empty left menu bar alto with the list got another issue that I described here Side menu + List + tab bar issue (side menu stop working)


#19

The most updated pen is at:

@gnomeontherun wrote it and it solves tabs and side menu (s) (there is a left and right menu)
It was updated by @gnomeontherun to show the case of having the side menu items (in this pen it is the right menu items) link to a page that is not under one of the tabs, like the those left menu items are.

If you want the right side items to have a tab, you can add that manually( I cut and pasted my tabs code from tabs.html into that side menu item’s template) or you can put those items under one of the tabs in the index.js $statProvider code, just copy the format of, for example, how the “facts” view is defined and put the view of the side menu item under a tab in the same way.

If you don’t put the side menu page under a tab and want to add a tab bar to it manually into its template, you can also us ng-include to keep it Don’t Repeat Yourself DRY. Other wise you will possibly, depending on how many non-tab pages you have, need to update your tabs in multiple places which can lead to errors.

I haven’t used ng-include (or would it be data-ng-include) in my situation. I have found that if I put all the side menu pages under one tab ( in this case they all generally pertain to settings and help) then when I navigate the side menu items, they retain back arrow history too, which is feels elegant and useful for how I am using it. Bonus.

@gnomeontherun has mentioned that doing this might cause issues with child states, but I don’t know enough yet to anticipate what problems this might cause.


Side-menus nav-bar and tabs working together?
#20

Solved thanks to @Scott answer, check it out their answer and the pen has been updated