Semantic UI Minimize normal sidebar to icon sidebar

Question

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.

Saurav Rastogi Saurav Rastogi · Accepted Answer · 2016-11-05T05:28:02

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!

Semantic UI Minimize normal sidebar to icon sidebar

1 Answers