Ответ 1
Вы можете использовать работу как этот. Он включает в себя перемещение левого значения (через класс) как для фиксированного элемента, так и для контейнера.
.global-wrapper {
position: relative;
-webkit-transition: 300ms;
transition: 300ms;
}
.global-wrapper.expanded,
.global-wrapper.expanded .navbar {
left: 200px;
}
.navbar {
-webkit-transition: 300ms;
transition: 300ms;
position: fixed;
width: 100px;
height: 100%;
top: 0px;
left: 0px;
}
.content {
position: relative;
width: calc(100% - 170px); /* 100% - width of left bar plus margin */
}
С небольшим количеством ванильного JS для переключения его класса:
var wrapper = document.querySelector(".global-wrapper");
document.getElementById("expand").onclick = function() {
wrapper.classList.toggle("expanded");
}