2 files changed, 20 insertions, 6 deletions
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
index 4aadeb6b462..ccf45fd7c97 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/new_sidebar.js
@@ -1,5 +1,3 @@
-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);
   }
 }
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index eaf7daaa5cf..0ab5322a7a4 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/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