How to build a set of nested tabs

[zond]

Hello,

I am trying to build an app with two levels of tabs.

[my games] [other games] [create game]

where [my games] has

[running] [forming] [finished]

[other games] has

[open] [closed] [finished]

and [create game] has no children.

What I did was create 3 routes, /games/mine, /games/other and /games/create.
Inside /games/mine I created /running, /forming and /finished, and inside /games/other I created /open, /closed and /finished.

This works, apart from a few problems.

• When I load the app, none of the tabs are selected. I fixed this by adding if (window.location.pathname == '/') { MoreRouting.navigateTo('my-running-games'); } in the top app element.
• When I click one of the top level tabs, none of the bottom level tabs are selected. I fixed this by giving the top level tabs on-clicked handlers that do MoreRouting.navigateTo(...).

Now it all works perfectly!

Until I start using the back button, and notice that the unwanted states are still there, they are just not noticeable since I navigate away from them immediately. When I hit the back button, the states 'no tab at all selected' and 'only top level tab selected' happens when expected.

I realize my problems may occur because I am using more-routing in the wrong way, but I am at my wits end - how can I make this work? :O