Make sidebar accessible on mobile

app/assets/javascripts/new_sidebar.js

-const SIDEBAR_EXPANDED_CLASS = 'nav-sidebar-expanded';
-
 export default class NewNavSidebar {
   constructor() {
     this.initDomElements();
@@ -8,6 +6,7 @@ export default class NewNavSidebar {
 
   initDomElements() {
     this.$sidebar = $('.nav-sidebar');
+    this.$overlay = $('.mobile-overlay');
     this.$openSidebar = $('.toggle-mobile-nav');
     this.$closeSidebar = $('.close-nav-button');
   }
@@ -15,9 +14,11 @@ export default class NewNavSidebar {
   bindEvents() {
     this.$openSidebar.on('click', e => this.toggleSidebarNav(e, true));
     this.$closeSidebar.on('click', e => this.toggleSidebarNav(e, false));
+    this.$overlay.on('click', e => this.toggleSidebarNav(e, false));
   }
 
   toggleSidebarNav(show) {
-    this.$sidebar.toggleClass(SIDEBAR_EXPANDED_CLASS, show);
+    this.$sidebar.toggleClass('nav-sidebar-expanded', show);
+    this.$overlay.toggleClass('mobile-nav-open', show);
   }
 }

app/assets/stylesheets/new_sidebar.scss

@@ -115,7 +115,7 @@ $new-sidebar-width: 220px;
   position: fixed;
   z-index: 400;
   width: $new-sidebar-width;
-  transition: width $sidebar-transition-duration;
+  transition: left $sidebar-transition-duration;
   top: 50px;
   bottom: 0;
   left: 0;
@@ -124,7 +124,7 @@ $new-sidebar-width: 220px;
   box-shadow: inset -2px 0 0 $border-color;
 
   &.nav-sidebar-expanded {
-    width: $new-sidebar-width;
+    left: 0;
   }
 
   a {
@@ -156,7 +156,7 @@ $new-sidebar-width: 220px;
   }
 
   @media (max-width: $screen-xs-max) {
-    width: 0;
+    left: (-$new-sidebar-width);
   }
 }
 
@@ -242,6 +242,19 @@ $new-sidebar-width: 220px;
   }
 }
 
+.mobile-overlay {
+  display: none;
+
+  &.mobile-nav-open {
+    display: block;
+    position: absolute;
+    background-color: $black-transparent;
+    height: 100%;
+    width: 100%;
+    z-index: 300;
+  }
+}
+
 
 // Make issue boards full-height now that sub-nav is gone
 

app/views/layouts/_page.html.haml

@@ -10,6 +10,8 @@
     - if content_for?(:sub_nav)
       = yield :sub_nav
   .content-wrapper{ class: "#{(layout_nav_class unless show_new_nav?)}" }
+    - if show_new_nav?
+      .mobile-overlay
     .alert-wrapper
       = render "layouts/broadcast"
       - if show_new_nav?

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

@@ -3,6 +3,7 @@
 
 %nav.breadcrumbs{ role: "navigation" }
   .breadcrumbs-container{ class: [container_class, @content_class] }
+    - if defined?(@new_sidebar)
       %button.toggle-mobile-nav
         = icon ('bars')
     .breadcrumbs-links.js-title-container

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

 .nav-sidebar
-  = link_to admin_root_path, title: 'Admin Overview', class: 'context-header' do
+  .context-header
+    = link_to admin_root_path, title: 'Admin Overview' do
       .avatar-container.s40.settings-avatar
         = icon('wrench')
       .project-title Admin Area
+    %button.close-nav-button
+      = icon('times')
   %ul.sidebar-top-level-items
     = nav_link(controller: %w(dashboard admin projects users groups jobs 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
-  = link_to group_path(@group), title: @group.name, class: 'context-header' do
+  .context-header
+    = link_to group_path(@group), title: @group.name do
       .avatar-container.s40.group-avatar
         = image_tag group_icon(@group), class: "avatar s40 avatar-tile"
       .group-title
         = @group.name
+    %button.close-nav-button
+      = icon('times')
   %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
-  = link_to profile_path, title: 'Profile Settings', class: 'context-header' do
+  .context-header
+    = link_to profile_path, title: 'Profile Settings' do
       .avatar-container.s40.settings-avatar
         = icon('user')
       .project-title User Settings
+    %button.close-nav-button
+      = icon('times')
   %ul.sidebar-top-level-items
     = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
       = link_to profile_path, title: 'Profile Settings' do