I’m getting ready to start building an app in ember that will function like a mobile phone app (that will be where it is intended to be used) and this app will have a navigation bar at the bottom of the screen like many apps do (or did, I know patterns are getting away from that, that’s beside point) and this navigation bar will have a variable number of items in it, and each set of items will be different depending on what route/page/view you are currently on.
As a quick for instance, on the main page this nav bar may have 4 items it in, but when you click on on of them to go to a products page, it would only have three, and those three might be totally different items or a subset of the items that were there before it.
I intend to make this a component, but in my mind I was just going to wrap each of these in an if statement, and maybe check against a computed property that is dependent on if a certain set of routes is currently loaded and go about it that way.
My other thought was so define an Ember object possibly on each route that defines what navigation items that route should be showing, those would be passed in and the component would use that object to render the navigation menu template using that object as it’s information. I feel like this would allow me to not have to have a bunch of if statements in the template since the template won’t care about what items it receives it will just render what it’s handed on each route. This would break up the items being rendered on a per route basis so editing the names of menu items or icons for the menu items means I would have to open each route file that uses that menu item to edit it.
The final thought is something like how ember-liquid-fire handles animations, in that they are defined in a single transition file that all the routes call to get info about how they are to animate when transitioning. However here I could maintain a list of menu items with the info that goes with them, and then have a map of sorts that tells each route which ones to get. I suppose this could be combined with the second option to say there is an Ember object file that I import into the route file, and I extend from that object the menu items that I want for that route. That way I can still go and edit the menu items in the one object file and they get updated everywhere, but would only have to open the route file that I want to add or remove a menu item from without touching any other files.
But is there a best practice suited for achieving this?