Q:

Semantic UI Minimize normal sidebar to icon sidebar

I'm trying to customize the semantic-ui sidebar. I intend to create when i click the toggle button it will minimized to the labeled(icon) one. But it doesn't seems to be animated and the content(push content) doesn't seems to be pulled when i minimized it to the labeled icon sidebar.
HTML
<div class="ui left demo vertical inverted visible sidebar menu">
    <a class="item">
        <i class="home icon"></i>
        Home
    </a>
    <a class="item">
        <i class="block layout icon"></i>
        Topics
    </a>
    <a class="item">
        <i class="smile icon"></i>
        Friends
    </a>
</div>
<div class="pusher">
  <a href="#" id="toggle-btn">Toggle</a>
</div>

JS
$("#toggle-btn").click(function() {
  $(".ui.sidebar")
    .toggleClass("labeled icon");
});

And here's the codepen:
http://codepen.io/andhikaribrahim/pen/rWNEzr
Any help would be great!
Thanks in advance.

A:

Checkout this Codepen. Add a class on the .pusher as well to animate it accordingly using jQuery. Also, use CSS transitions insert animations.
For reference,
CSS:
.ui.left {
  transition: width .2s linear;
}

.labeled.icon {
  width: 84px !important;
}

.pusher.push {
  transform: translate3d(84px,0,0) !important;
}

JS:
$("#toggle-btn").click(function() {
  $(".ui.sidebar").toggleClass("labeled icon");
  $(this).parent().toggleClass('push');
});

Hope this helps!

