Sidebar with responsive content


#1

I’m trying to use a sidebar on the left of my website, but I want it to NOT pushing the content out of view when sidebar is visible. Instead, I want the content area to be responsive by shrinking the content area a little bit to make space for the sidebar.

Overlay is not an option because the sidebar will be visible for most of the time as a main site navigation menu, and apparently overlay will block part of the content and cannot be used for my case.

Here’s a good example of what I’m trying to do with Semantic UI sidebar.
https://demos.microdesign-web.com/sample_admin/

Note how the sidebar slides out without pushing the content out of the right edge of screen.

Your help is much appreciated. Thanks!