Make disabled docs list foldable

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -27,7 +27,10 @@ templates.sidebarLabel = (doc, options = {}) ->
   label += 'checked' if options.checked
   label +  ">#{doc.name}</label>"
 
-templates.sidebarDisabled = '<h6 class="_list-title">Disabled</h6>'
+templates.sidebarDisabledList = (options) ->
+  """<div class="_disabled-list">#{templates.render 'sidebarDoc', options.docs, disabled: true}</div>"""
+
+templates.sidebarDisabled = '<h6 class="_list-title"><span class="_list-arrow"></span>Disabled</h6>'
 
 templates.sidebarVote = '<a href="https://trello.com/b/6BmTulfx/devdocs-documentation" class="_list-link" target="_blank">Vote for new documentation</a>'
 

assets/javascripts/views/sidebar/doc_list.coffee

@@ -4,10 +4,15 @@ class app.views.DocList extends app.View
   @events:
     open:  'onOpen'
     close: 'onClose'
+    click: 'onClick'
 
   @routes:
     after: 'afterRoute'
 
+  @elements:
+    disabledTitle: '._list-title'
+    disabledList: '._disabled-list'
+
   init: ->
     @lists = {}
 
@@ -32,11 +37,23 @@ class app.views.DocList extends app.View
   render: =>
     @html @tmpl('sidebarDoc', app.docs.all())
     @renderDisabled() unless app.isSingleDoc() or app.settings.hasDocs()
+    @refreshElements()
     return
 
   renderDisabled: ->
-    @append @tmpl('sidebarDisabled') +
+    @append @tmpl('sidebarDisabled')
-            @tmpl('sidebarDoc', app.disabledDocs.all(), disabled: true)
+    @renderDisabledList()
+    return
+
+  renderDisabledList: ->
+    @append @tmpl('sidebarDisabledList', docs: app.disabledDocs.all())
+    @refreshElements()
+    @disabledTitle.classList.add('open-title')
+    return
+
+  removeDisabledList: ->
+    @disabledList.remove()
+    @disabledTitle.classList.remove('open-title')
     return
 
   reset: ->
@@ -97,6 +114,15 @@ class app.views.DocList extends app.View
     $.scrollTo @find("a[href='#{model.fullPath()}']"), null, 'top', margin: 0
     return
 
+  onClick: (event) =>
+    return unless @disabledTitle and $.hasChild @disabledTitle, event.target
+    $.stopEvent(event)
+    if @disabledTitle.classList.contains('open-title')
+      @removeDisabledList()
+    else
+      @renderDisabledList()
+
+
   afterRoute: (route, context) =>
     if context.init
       @reset()

assets/stylesheets/components/_sidebar.scss

@@ -59,7 +59,10 @@
 }
 
 ._list-title {
-  margin: 1rem 0 .5rem 2.25rem;
+  position: relative;
+  margin: .5rem 0 0;
+  padding-left: 2.25rem;
+  line-height: 2rem;
   font-size: .75rem;
   color: $textColorLight;
   text-transform: uppercase;
@@ -158,7 +161,7 @@
   &:before {
     @extend %icon, %icon-dir;
 
-    .open > & {
+    .open, .open-title > & {
       -webkit-transform: rotate(90deg);
               transform: rotate(90deg);
     }