bootstrap sidebars, add/remove toggled-left, toggled-right to wrapper to fold/unfold

layout.html

<div class="row row-no-padding wrapper">                                                                                                                                                                                                                                          
  <div class="sidebar-left-wrapper">
    Left
  </div>
  <div class="page-content-wrapper">
    Content
  </div>
  <div class="sidebar-right-wrapper">
    Right
  </div>
</div>

sidebars.scss

$transition-time: 0.2s;

$sidebar-left-width: 200px;
$sidebar-left-width-collapsed: 0px;

$sidebar-right-width: 150px;
$sidebar-right-width-collapsed: 0px;

$default-bg: #000;

.page-content-wrapper {
    width: 100%;
    position: absolute;
}

.wrapper {
    padding-left: 0;
    padding-right: 0;
    -webkit-transition: all $transition-time ease;
    -moz-transition: all $transition-time ease;
    -o-transition: all $transition-time ease;
    transition: all $transition-time ease;
}

//
// Left
//

.wrapper .toggled-left {
    padding-left: $sidebar-left-width;
}

.sidebar-left-wrapper {
    z-index: 1000;
    position: fixed;
    left: $sidebar-left-width;
    width: $sidebar-left-width-collapsed;
    height: 100%;
    margin-left: -$sidebar-left-width;
    overflow-y: auto;
    background: $default-bg;
    -webkit-transition: all $transition-time ease;
    -moz-transition: all $transition-time ease;
    -o-transition: all $transition-time ease;
    transition: all $transition-time ease;
}

.wrapper.toggled-left .sidebar-left-wrapper {
    width: $sidebar-left-width;
}

.wrapper.toggled-left .page-content-wrapper {
    position: absolute;
    margin-right: -$sidebar-left-width;
}

//
// Right
//

.wrapper .toggled-right {
    padding-right: $sidebar-right-width;
}

.sidebar-right-wrapper {
    z-index: 1000;
    position: fixed;
    right: $sidebar-right-width;
    width: $sidebar-right-width-collapsed;
    height: 100%;
    margin-right: -$sidebar-right-width;
    overflow-y: auto;
    background: $default-bg;
    -webkit-transition: all $transition-time ease;
    -moz-transition: all $transition-time ease;
    -o-transition: all $transition-time ease;
    transition: all $transition-time ease;
}

.wrapper.toggled-right .sidebar-right-wrapper {
    width: $sidebar-right-width;
}

.wrapper.toggled-right .page-content-wrapper {
    position: absolute;
    margin-right: -$sidebar-right-width;
}

@media(min-width:768px) {
    .page-content-wrapper {
        position: relative;
    }

    .wrapper {
        padding-left: $sidebar-left-width;
        padding-right: $sidebar-right-width;
    }

    //
    // Left
    //

    .wrapper.toggled-left {
        padding-left: $sidebar-left-width-collapsed;
    }

    .sidebar-left-wrapper {
        width: $sidebar-left-width;
    }

    .wrapper.toggled-left .sidebar-left-wrapper {
        width: $sidebar-left-width-collapsed;
    }


    .wrapper.toggled-left .page-content-wrapper {
        position: relative;
        margin-right: 0;
    }

    //
    // Right
    //

    .wrapper.toggled-right {
        padding-right: $sidebar-right-width-collapsed;
    }

    .sidebar-right-wrapper {
        width: $sidebar-right-width;
    }

    .wrapper.toggled-right .sidebar-right-wrapper {
        width: $sidebar-right-width-collapsed;
    }


    .wrapper.toggled-right .page-content-wrapper {
        position: relative;
        margin-left: 0;
    }
}

[1. ](# url)