Menu and layout

I have a menu /system which contains a top bar with menu items, and a side bar with other menu items. It looks like this:

The biggest square panel will show all the information the user can interact with. The menu interaction looks like this:

If for example the top panel menu item “Settings” is clicked, the side menu shows the items “Sound”, “Graphics”, “Payment”, etc. When “Sound” on the side bar is clicked, the big square panel shows “Volume - high-----low”, “Sound ON - tick”, “Music ON - tick”, etc. This is a pretty common use case.

If you click on another top bar menu item, the side bar menu items change to reflect the sub menu items available for the selected top menu. Here are a few of the variations available (just an example):

I have yet to find a way to implement this in Rive using the new layout system in a manner which low effort and easy to maintain. I have tried several different techniques but they are all very labor intensive and a nightmare to maintain. If you want to change one thing, you have to make changes to dozens of other related items.

The top bar menu isn’t the problem as that one is static. The issue is with the side bar menu and to a much larger degree, the big square panel. In order to make the side bar menu, I made copies of the layout panel, placed them on top of each other, changed the menu item text on each copy, and manually switched the panels on and off in a timeline. This is doable, but if I want to make a change to the panel appearance (spacing, etc), I have to make the same change to all the other copies. So it is not easy to maintain.

The biggest issue is with the big square panel. In the example above there are only 4 side panel variations. But for the big square panel, there are 4x4=16 panel variations. To switch these on and off depending the top menu and side menu selection, becomes both unworkable using a timeline, and it’s not easy to make a uniform change.

What would be the best way to design such a menu using the new layout system?