just put in 2 html divs 1 sidebar and 1 container.
where you play with de css media query. This css option captures your screen pixels (in example below)
Now you can set extra css classes in javascript and lets the css do the rest.
If you need more screen media query. Just add an extra media part in the css (example @media(min-width:768px) { /* css classes go here*/} )
maybe this small example get you started:
<div id="sidebar"></div>
<div id="container"></div>
#sidebar {
position: absolute;
top: 45px;
left: 0px;
bottom: 0px;
width: 180px;
}
#container {
position: absolute;
top: 45px;
left: 180px;
right: 0px;
bottom: 0px;
}
@media(min-width:1024px) {
#sidebar.expanded {
width: 180px;
}
#sidebar.collapsed {
width: 45px;
}
#container.expanded {
left: 180px;
}
#container.collapsed {
left: 45px;
}
}
