How can I achieve this kind of navigation?


#1

Hey,

this is based on the sidemenu starter template that I modified a bit (not the real app, just to get the most simple explanation of my problem).

I want to add a different view to the second level, so instead of a list of songs in a playlist I get a grid of images for these songs. Navigation should work like this:

I tried adding tabs to the second level, but somehow everything got garbled up and didn’t work any more.

How can I achieve this?


#2

@olliebennett answered in the Slack chat after I posted this link:

I think you’d be better off thinking of the two views as states of the same view
then the existing history / navigation would work as expected
and your button (in the top right) would act as a toggle, to switch between “list view” or “grid view"
and - by switching classes - you could achieve it all with CSS (and perhaps minor html)
so - basic example - start with <div ng-class=“toggle ? ‘custom-grid-layout' : ‘custom-list-layout'”> and use flexbox styling for .custom-grid-layout and .custom-list-layout respectively
start by comparing a grid layout and a list layout and see what you need to change based on the toggle state
the button in your navigation would be ng-click=“toggle = !toggle” or similar - probably using a service so it persisted

I will try that and report back.