Sidebar Slide-along keeping pusher content centered

[sanjithkumar017]

I am trying to create a sidebar with animation Slide Along.

When the sidebar is hidden, the pusher content is centered with respect to the width. But when the sidebar is visible, the width of the pusher remains the same and there is an additional width from the visible sidebar. Hence the pusher content, which is still centered looks skewed to the right.

Here is an example. Initial Codepen

This is what I tried. My Attempt.

I am trying to keep the pusher content centered at all times.

Thanks.

[y0hami]

This is the expected behavior hence why it's a pusher. It pushes your content of the page.

[sanjithkumar017]

The user will have to look at two different places in the browser or may be scroll horizontally depending upon the visibility of the sidebar.

invisible => pusher is in the center
visible => pusher is in the right

I just want to avoid this.

[y0hami]

Maybe there should be another class which pushes the content but not off the canvas.