--- a/coffee/sidebar.coffee	Sun Apr 03 18:51:54 2016 +0800
+++ b/coffee/sidebar.coffee	Sun Apr 03 22:03:54 2016 +0800
@@ -7,6 +7,11 @@
   getPipColor: (show) =>
     "background: #{ @colors[show] || @colors['default'] };"
 
+  minify: =>
+    minified = not @model.get('sidebar/minified')
+    @model.set('sidebar/minified', minified)
+    @$el.parent().toggleClass('mini', minified)
+
   show: (event) =>
     $btn = $(event.currentTarget)
     show = $btn.attr('data-show')

--- a/css/tram-im.css	Sun Apr 03 18:51:54 2016 +0800
+++ b/css/tram-im.css	Sun Apr 03 22:03:54 2016 +0800
@@ -16,6 +16,10 @@
 }
 .has-sidebar {
     padding-left: 200px;
+    transition: padding-left 0.1s ease-in-out;
+}
+.has-sidebar.mini {
+    padding-left: 42px;
 }
 .sidebar {
     background: #333;
@@ -26,10 +30,17 @@
     left: 0;
     overflow-x: hidden;
     overflow-y: auto;
+    transition: width 0.1s ease-in-out;
 }
 .sidebar .status-pip {
     margin-right: 2px;
 }
+.sidebar.mini {
+    width: 42px;
+}
+.sidebar.mini .label {
+    display: none;
+}
 .main-grid {
     margin: 0;
 }

--- a/index.html	Sun Apr 03 18:51:54 2016 +0800
+++ b/index.html	Sun Apr 03 22:03:54 2016 +0800
@@ -63,30 +63,46 @@
     </script>
 
     <div class="has-sidebar uk-hidden" data-step="main">
-      <div class="sidebar" data-app="sidebar">
+      <div class="sidebar" data-app="sidebar" rv-class-mini="model:sidebar/minified">
         <ul class="uk-nav uk-nav-side uk-nav-offcanvas uk-text-nowrap">
+          <li class="uk-text-center">
+            <a rv-on-click="view.minify">
+              <i class="uk-icon-chevron-right" rv-if="model:sidebar/minified"></i>
+              <i class="uk-icon-chevron-left" rv-unless="model:sidebar/minified"></i>
+            </a>
+          </li>
+          <li class="uk-nav-divider"></li>
           <li rv-class-uk-active="model:show | eq 'chat'">
             <a data-show="chat" rv-on-click="view.show">
-              <div class="status-pip" rv-style="'chat' | fn view.getPipColor"></div> Ready to chat
+              <div class="status-pip" rv-style="'chat' | fn view.getPipColor"></div>
+              <span class="label">Ready to chat</span>
             </a>
           </li>
           <li rv-class-uk-active="model:show | eq 'online'">
             <a data-show="online" rv-on-click="view.show">
-              <div class="status-pip" rv-style="'online' | fn view.getPipColor"></div> Online
+              <div class="status-pip" rv-style="'online' | fn view.getPipColor"></div>
+              <span class="label">Online</span>
             </a>
           </li>
           <li rv-class-uk-active="model:show | eq 'away'">
             <a data-show="away" rv-on-click="view.show">
-              <div class="status-pip" rv-style="'away' | fn view.getPipColor"></div> Away
+              <div class="status-pip" rv-style="'away' | fn view.getPipColor"></div>
+              <span class="label">Away</span>
             </a>
           </li>
           <li rv-class-uk-active="model:show | eq 'xa'">
             <a data-show="xa" rv-on-click="view.show">
-              <div class="status-pip" rv-style="'xa' | fn view.getPipColor"></div> Gone
+              <div class="status-pip" rv-style="'xa' | fn view.getPipColor"></div>
+              <span class="label">Gone</span>
             </a>
           </li>
           <li class="uk-nav-divider"></li>
-          <li><a rv-on-click="view.disconnect"><i class="uk-icon-sign-out"></i> Log out</a></li>
+          <li>
+            <a rv-on-click="view.disconnect">
+              <i class="uk-icon-sign-out"></i>
+              <span class="label">Log out</span>
+            </a>
+          </li>
         </ul>
       </div>
 

--- a/js/sidebar.js	Sun Apr 03 18:51:54 2016 +0800
+++ b/js/sidebar.js	Sun Apr 03 22:03:54 2016 +0800
@@ -10,6 +10,7 @@
     function SidebarApp() {
       this.disconnect = bind(this.disconnect, this);
       this.show = bind(this.show, this);
+      this.minify = bind(this.minify, this);
       this.getPipColor = bind(this.getPipColor, this);
       return SidebarApp.__super__.constructor.apply(this, arguments);
     }
@@ -24,6 +25,13 @@
       return "background: " + (this.colors[show] || this.colors['default']) + ";";
     };
 
+    SidebarApp.prototype.minify = function() {
+      var minified;
+      minified = !this.model.get('sidebar/minified');
+      this.model.set('sidebar/minified', minified);
+      return this.$el.parent().toggleClass('mini', minified);
+    };
+
     SidebarApp.prototype.show = function(event) {
       var $btn, show, status;
       $btn = $(event.currentTarget);

--- a/js/sidebar.js.map	Sun Apr 03 18:51:54 2016 +0800
+++ b/js/sidebar.js.map	Sun Apr 03 22:03:54 2016 +0800
@@ -6,5 +6,5 @@
     "coffee/sidebar.coffee"
   ],
   "names": [],
-  "mappings": ";AAAA;AAAA,MAAA;;;;EAAM,MAAM,CAAC,IAAI,CAAC;;;;;;;;;;yBAChB,MAAA,GAAQ,IAAI,CAAC,MAAM,CAAC;;yBAEpB,UAAA,GAAY,SAAA;aACV,IAAC,CAAA,MAAD,CAAA;IADU;;yBAGZ,WAAA,GAAa,SAAC,IAAD;aACX,cAAA,GAAc,CAAE,IAAC,CAAA,MAAO,CAAA,IAAA,CAAR,IAAiB,IAAC,CAAA,MAAO,CAAA,SAAA,CAA3B,CAAd,GAAqD;IAD1C;;yBAGb,IAAA,GAAM,SAAC,KAAD;AACJ,UAAA;MAAA,IAAA,GAAO,CAAA,CAAE,KAAK,CAAC,aAAR;MACP,IAAA,GAAO,IAAI,CAAC,IAAL,CAAU,WAAV;MACP,MAAA,GAAS,IAAI,CAAC,IAAL,CAAA,CAAW,CAAC,IAAZ,CAAA;aACT,IAAC,CAAA,KAAK,CAAC,OAAP,CAAe,MAAf,EAAuB,IAAvB,EAA6B,MAA7B;IAJI;;yBAMN,UAAA,GAAY,SAAA;aACV,IAAC,CAAA,KAAK,CAAC,OAAP,CAAe,YAAf;IADU;;yBAGZ,MAAA,GAAQ,SAAC,KAAD;MACN,IAAC,CAAA,KAAD,GAAS,MAAM,CAAC,IAAP,CAAY,IAAC,CAAA,EAAb,EAAiB;QAAA,KAAA,EAAO,IAAC,CAAA,KAAR;QAAe,IAAA,EAAM,IAArB;OAAjB;aACT;IAFM;;yBAIR,MAAA,GAAQ,SAAA;MACN,IAAC,CAAA,KAAK,CAAC,MAAP,CAAA;aACA,wCAAA,SAAA;IAFM;;;;KAtB2B,QAAQ,CAAC;AAA9C"
+  "mappings": ";AAAA;AAAA,MAAA;;;;EAAM,MAAM,CAAC,IAAI,CAAC;;;;;;;;;;;yBAChB,MAAA,GAAQ,IAAI,CAAC,MAAM,CAAC;;yBAEpB,UAAA,GAAY,SAAA;aACV,IAAC,CAAA,MAAD,CAAA;IADU;;yBAGZ,WAAA,GAAa,SAAC,IAAD;aACX,cAAA,GAAc,CAAE,IAAC,CAAA,MAAO,CAAA,IAAA,CAAR,IAAiB,IAAC,CAAA,MAAO,CAAA,SAAA,CAA3B,CAAd,GAAqD;IAD1C;;yBAGb,MAAA,GAAQ,SAAA;AACN,UAAA;MAAA,QAAA,GAAW,CAAI,IAAC,CAAA,KAAK,CAAC,GAAP,CAAW,kBAAX;MACf,IAAC,CAAA,KAAK,CAAC,GAAP,CAAW,kBAAX,EAA+B,QAA/B;aACA,IAAC,CAAA,GAAG,CAAC,MAAL,CAAA,CAAa,CAAC,WAAd,CAA0B,MAA1B,EAAkC,QAAlC;IAHM;;yBAKR,IAAA,GAAM,SAAC,KAAD;AACJ,UAAA;MAAA,IAAA,GAAO,CAAA,CAAE,KAAK,CAAC,aAAR;MACP,IAAA,GAAO,IAAI,CAAC,IAAL,CAAU,WAAV;MACP,MAAA,GAAS,IAAI,CAAC,IAAL,CAAA,CAAW,CAAC,IAAZ,CAAA;aACT,IAAC,CAAA,KAAK,CAAC,OAAP,CAAe,MAAf,EAAuB,IAAvB,EAA6B,MAA7B;IAJI;;yBAMN,UAAA,GAAY,SAAA;aACV,IAAC,CAAA,KAAK,CAAC,OAAP,CAAe,YAAf;IADU;;yBAGZ,MAAA,GAAQ,SAAC,KAAD;MACN,IAAC,CAAA,KAAD,GAAS,MAAM,CAAC,IAAP,CAAY,IAAC,CAAA,EAAb,EAAiB;QAAA,KAAA,EAAO,IAAC,CAAA,KAAR;QAAe,IAAA,EAAM,IAArB;OAAjB;aACT;IAFM;;yBAIR,MAAA,GAAQ,SAAA;MACN,IAAC,CAAA,KAAK,CAAC,MAAP,CAAA;aACA,wCAAA,SAAA;IAFM;;;;KA3B2B,QAAQ,CAAC;AAA9C"
 }
\ No newline at end of file