sun station sun station - 1 month ago 16
CSS Question

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.

Answer

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!