So this is different from what I can find elsewhere. I have a page which has its own sidemenu - not a global side menu like the examples. I used the code from below and it is all working as expected for the sidemenu on the page:
However when I add tabs to the design, the tabs are permanantly floating on top of the sidemenu. (As pictured) If I moved the sidemenu much higher up in in the dom (above the tabs) using chrome, everything works as expected. I only want the menu on one page of the app, and its for filtering, not navigation so it needs to talk directly to the page its on.
In Angular1 I would make a directive of sorts and pass info back and forward that way, but this is my first angular2 app and thereby ionic 2 app and I’m kind of lost as to how to solve it. Hopefully the pictures below help:
So I have come up with what I think is a pretty crappy solution, but its here for posterity if someone comes back. I would also LOVE to hear of a better way to do this!
First I tried bundling the menu into a directive and moving its position in the dom next to the bootstrapped call. This didn’t work because menus in ionic need to be a peer of their content, and because in angular 2 there is no replace option on directives (I believe its also depreciated in angular1 now too).
Next I had to put the entire HTML tree for the menu next in the app.ts file. I tried creating an attribute directive on the top of the menu to handle the logic at least in one central location, but you guessed right - that was a crappy idea also because it couldn’t handle subitems with binding and callbacks because it was only an attribute.
Now all the code to handle population of the content lives in app.ts which I usually try and reserve for initialisation and other global bits and pieces, it also has to handle event callbacks and the like.
Because there now is a shared object that gets updated to do the search / query, I have also had to create a service that lives between the page and the menu to do the communication and keep a singleton running.
In writing this it occurred to me that its only the parent tag that has to be adjacent to the content… so maybe I should try going back to the directive / component path just for all the sub content?
Frankly this is a PITA for something that I should just be able to do a this.nav.present(sideMenu) type thing on. I hope its something that they will fix in the future but for now it seems like we are stuck with this?
On a final note - the reason for not using a modal is because users probably have a long list of potential, non-essential demands they are searching for. Which may mean that they won’t get an exact match for every wish, and will toggle them back and forward until they are happy. A similar use case could be an online cars portal or something like ebay. If you have a better UX solution I would also be interested.
