Side menu, tabs and side-menu as a view no working together (a bit complex)

Hello, I’m building and app and I’m getting a bit frustrated after some fixes that looks like a "bad thing"
But this time i could’nt fix this issue and it is a bit complex demo to look at.

have a looks is this fiddle:

it has:
3 app states
App, App.main, App.people

App is abstract and control the whole app.
App.main has 6 views, 2 side bars and 4 tabs (there’s a blank tab)
App.people is has a view to be show inside right side bar view

But the following scenario is happening:

Open the right sidebar -> Click at the only button:
Now when changing main tabs it goes a bit awkward and sidebar go back to main view (why?) and also, cannot drag to show sidebar anymore.

Open the right sidebar -> Click at the only button -> Clicl right sidebar header to go back into previous state:
The main content side bar (tabs) just go back to it’s first state (the hidden bar is selected)

Why there’s a hidden tab? because without this workaround, I can’t select a tab from another.
Eg: Click tab 3, 2 1 and now can’t click from tab 1 to 3 (it does not work) the hidden tab is a workaround.

i know this is really confusing and really hard to read at codepen.

I just don’t know how to fix this thing, I wanted to my sidebar, on click, show a “next page” and then go back without destroying everything else…

Also, is my router states correctly? it works like this?

Thanks for your patience and time.

My current workaround is using Modal.