Improve doc picker UI

Rel: #189

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -60,6 +60,8 @@ templates.sidebarDisabledList = (html) ->
 templates.sidebarDisabledVersionedDoc = (doc, versions) ->
   """<a class="_list-item _list-dir _icon-#{doc.icon} _list-disabled" data-slug="#{doc.slug_without_version}" tabindex="-1">#{arrow}#{doc.name}</a><div class="_list _list-sub">#{versions}</div>"""
 
+templates.docPickerHeader = """<div class="_list-picker-head"><span>Documentation</span> <span>Enable</span></div>"""
+
 templates.docPickerNote = """
   <div class="_list-note">Tip: for faster and better search results, select only the docs you need.</div>
   <a href="https://trello.com/b/6BmTulfx/devdocs-documentation" class="_list-link" target="_blank" rel="noopener">Vote for new documentation</a>

assets/javascripts/views/sidebar/doc_picker.coffee

@@ -23,7 +23,7 @@ class app.views.DocPicker extends app.View
     return
 
   render: ->
-    html = ''
+    html = @tmpl('docPickerHeader')
     docs = app.docs.all().concat(app.disabledDocs.all()...)
 
     while doc = docs.shift()
@@ -35,9 +35,7 @@ class app.views.DocPicker extends app.View
 
     @html html + @tmpl('docPickerNote')
 
-    $.requestAnimationFrame =>
+    $.requestAnimationFrame => @findByTag('input')?.focus()
-      @addClass '_in'
-      @findByTag('input')?.focus()
     return
 
   renderVersions: (docs) ->

assets/stylesheets/components/_sidebar.scss

@@ -322,16 +322,28 @@
 //
 
 ._list-picker {
-  > ._list, > ._list-item {
-    opacity: 0;
-    transition: opacity .2s;
-  }
-  &._in { > ._list, > ._list-item { opacity: 1; } }
-
   ._list-item { cursor: pointer; }
   ._list-sub > ._list-item { padding-left: 2.375rem; }
 }
 
+._list-picker-head {
+  display: flex;
+  justify-content: space-between;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin-right: 1px;
+  padding: .5rem .75rem .25rem .75rem;
+  line-height: 1.5rem;
+  font-size: .75rem;
+  font-weight: $bolderFontWeight;
+  color: $textColorLight;
+  text-transform: uppercase;
+  background: linear-gradient(to bottom, $sidebarBackground, $sidebarBackground 75%, rgba($sidebarBackground, 0));
+  cursor: default;
+}
+
 ._list-checkbox {
   position: absolute;
   top: .5rem;