Add context header to sidebar

app/assets/stylesheets/new_sidebar.scss

@@ -5,17 +5,41 @@
 $new-sidebar-width: 220px;
 .page-with-new-sidebar {
-
   @media (min-width: $screen-sm-min) {
     padding-left: $new-sidebar-width;
   }
+  // Override position: absolute
   .right-sidebar {
     position: fixed;
     height: 100%;
   }
 }
+.context-header {
+  background-color: $gray-normal;
+  border-bottom: 1px solid $border-color;
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+
+  .avatar-container {
+    flex: 0 0 40px;
+  }
+}
+
+.settings-avatar {
+  background-color: $white-light;
+
+  .fa-wrench {
+    font-size: 20px;
+    width: 100%;
+    color: $gl-text-color-light;
+    text-align: center;
+    align-self: center;
+  }
+}
+
 .nav-sidebar {
   position: fixed;
   z-index: 400;

app/views/layouts/nav/_new_admin_sidebar.html.haml

 .nav-sidebar
+  .context-header
+    .avatar-container.s40.settings-avatar
+      = icon('wrench')
+    .project-title Admin Area
   %ul.sidebar-top-level-items
     = nav_link(controller: %w(dashboard admin projects users groups builds runners cohorts), html_options: {class: 'home'}) do
       = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do

app/views/layouts/nav/_new_group_sidebar.html.haml

 .nav-sidebar
+  .context-header
+    .avatar-container.s40.group-avatar
+      = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
+    .group-title
+      = @group.name
   %ul.sidebar-top-level-items
     = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
       = link_to group_path(@group), title: 'Home' do

app/views/layouts/nav/_new_profile_sidebar.html.haml

 .nav-sidebar
+  .context-header
+    .avatar-container.s40.settings-avatar
+      = icon('wrench')
+    .project-title Settings
   %ul.sidebar-top-level-items
     = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
       = link_to profile_path, title: 'Profile Settings' do

app/views/layouts/nav/_new_project_sidebar.html.haml

 .nav-sidebar
   - can_edit = can?(current_user, :admin_project, @project)
+  .context-header
+    .avatar-container.s40.project-avatar
+      = project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
+    .project-title
+      = @project.name
   %ul.sidebar-top-level-items
     = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
       = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do