Logic for horizontally scrolling between sidebar menus

[stackerito]

I've been trying for a few days to think about the best approach for scrolling horizontally between the menus and sub-menus of the sidebar.
I'm using tailwind css and this is how the sidebar looks: (I left the overflow-x-scroll so you can see the menus)

https://play.tailwindcss.com/XGj81cS2wm

I tried at first to use x-show for each sub-menu and then translate with x-transition (enter and leave).
But I think it's bad because I have to manually set the translate width depending on the position of the menu. and it's not dynamic, so if I want to add more menus I will have to redo it.
Also it doesn't sync nice together..

How can I do it?

[KevinBatdorf]

I would have two panels, one for the main static, top-level menu items, and another that is dynamically generated when the user pressed a menu item. That way you only need to manage movement between two panels.

Before you add menu items, you can just manage the movement first with generic buttons that go forward and back. After you have that down, iterate over your data to add in the items.

Here's one I quickly put together just now. maybe you can get some tips from it: https://codepen.io/KevinBatdorf/pen/qBmKOQN?editors=1010

[stackerito]

Your code is nice! But, I tried to edit it for 3 panels (because there might be more than 2). and I can't get the movement to display correctly - i.e if you go from first nested panel to the second nested, I can't get the animation to show correctly - In your example it would be something like: Home > More Info > (Insert another nested menu here).

Something just breaks whenever I do it. Could you please help me with that one? On adding more than 2 menus?

[stackerito]

@KevinBatdorf here is an example of what I've tried to do so far without success: https://codepen.io/Stackerito/pen/zYwaBjO

(Added third div at the bottom for the third panel and added children object for the Home > More Info object)

[KevinBatdorf]

I may have time over the weekend to help out but essentially you will need to do two things:

1. Change how state it handled to support how nested the menu is
2. Either split the translate class into specific widths instead of "full", OR add a second div container with two nested child containers, so that way you only have to deal with "full" and "half" transforms

<div>
  <div>First panel</div>
  <div> <!-- This one will be either translate 0, half, or full depending on state -->
    <div>Second level panel</div>
    <div>Third level</div>
  </div>
</div>