Как сделать вот такой выдвигающийся sidebar?

Question

[make_dev]

Привет! Как можно сделать вот такой выдвигающийся sidebar?
bucketadmin.themebucket.net/index.html
Чтобы при открытии сайдбара основной контент не уезжал за пределы экрана, а просто немного сжимался.
Для основного контента планирую использовать флексбокс.

Answer 1

[Котик Антон]

При закрытии меню к тегу основного контента добавляется класс merge-left, а к тегу меню - класс hide-left-bar:

<div id="sidebar" class="nav-collapse hide-left-bar">
   ...
</div>
<section id="main-content" class="merge-left">
   ...
</section>

#main-content {
    margin-left: 240px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.merge-left {
    margin-left: 0px !important;
}

#sidebar {
    width: 240px;
    height: 100%;
    position: fixed;
    background: #32323a;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.hide-left-bar {
    margin-left: -240px !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}