Tabs on the sidebar, the beginning based on @svenfuchs work

assets/scripts/app/templates/layouts/sidebar.hbs

@@ -9,9 +9,23 @@
 </div>
 
 {{view view.DecksView}}
-{{view view.WorkersView}}
+
-{{view view.RunningJobsView}}
+<ul class="tabs">
-{{view view.QueuesView}}
+  <li id="tab_queues" {{bindAttr class="view.classQueues"}}>
+    <h5><a href="#" {{action activate "queues" target="view"}}>{{t layouts.application.queues}}</a></h5>
+  </li>
+  <li id="tab_jobs" {{bindAttr class="view.classJobs"}}>
+    <h5><a href="#" {{action activate "jobs" target="view"}}>{{t layouts.application.jobs}}</a></h5>
+  </li>
+  <li id="tab_workers" {{bindAttr class="view.classWorkers"}}>
+    <h5><a href="#" {{action activate "workers" target="view"}}>{{t layouts.application.workers}}</a></h5>
+  </li>
+</ul>
+
+<div class="pane">
+  {{outlet pane}}
+</div>
+
 {{view view.LinksView}}
 
 <div id="about" class="box">

assets/scripts/app/views/sidebar.coffee

@@ -2,6 +2,22 @@
   SidebarView: Travis.View.extend
     templateName: 'layouts/sidebar'
 
+    activate: (name) ->
+      @set('activeTab', name)
+      @connectOutlet 'pane', @["#{name.capitalize()}View"].create(controller: @get('controller'))
+
+    classQueues: (->
+      'active' if @get('activeTab') == 'queues'
+    ).property('activeTab')
+
+    classWorkers: (->
+      'active' if @get('activeTab') == 'workers'
+    ).property('activeTab')
+
+    classJobs: (->
+      'active' if @get('activeTab') == 'jobs'
+    ).property('activeTab')
+
     DecksView: Em.View.extend
       templateName: "sponsors/decks"
       init: ->
@@ -26,7 +42,7 @@
         @_super.apply this, arguments
         @set 'controller', @get('controller').container.lookup('controller:queues')
 
-    RunningJobsView: Em.View.extend
+    JobsView: Em.View.extend
       templateName: 'jobs/running'
       elementId: 'running-jobs'
       init: ->

assets/styles/right/lists.sass

@@ -1,12 +1,51 @@
 @import "_mixins/all"
 
 #right
-  #queues
+  .tabs
-    margin-top: 0
+    margin-top: 28px
+    height: 25px
+    border-bottom-color: $color-border-light
+
+    li
+      display: inline-block
+      height: 24px
+      margin-right: 3px
+      background-color: $color-bg-right
+      border: 1px solid $color-bg-right
+      border-bottom-color: $color-border-light
+      white-space: nowrap
+      cursor: pointer
+      @include border-top-radius(4px)
+      font-size: 10px
+
+      &:hover
+        background-color: $color-bg-tab-hover
+        border-color: $color-border-light
+        border-bottom-color: $color-bg-tab-active
+
+    .active
+      background-color: $color-bg-tab-active
+      border-color: $color-border-light
+      border-bottom-color: $color-bg-tab-active
+
+    h5
+      margin: 0
+      font-size: $font-size-small
+      font-weight: normal
+      line-height: 26px
+
+      a
+        display: block
+        padding: 0 10px
+
+  .pane
+    position: relative
 
   #toggle-workers
+    position: absolute
+    top: -30px
+    right: 5px
     display: inline-block
-    float: right
     width: 10px
     height: 10px
     cursor: pointer
@@ -17,6 +56,9 @@
   #workers li ul
     display: none
 
+  #queues
+    margin-top: 0
+
   #workers li,
   #queues ul li
     overflow: hidden