Adds drop shadow to the expanded sidebarsidebar-drop-shadow

Shadow is added in sm & md breakpoints. Clicking the anything outside of
the sidebar also hides collapses the sidebar at these breakpoints.

Closes #13983

2 files changed, 12 insertions, 0 deletions

diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
index 709a5d33b9f..fbe474f2f61 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/new_sidebar.js
@@ -19,6 +19,11 @@ export default class NewNavSidebar {
   }
 
   bindEvents() {
+    document.addEventListener('click', (e) => {
+      if (!e.target.closest('.nav-sidebar') && (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')) {
+        this.toggleCollapsedSidebar(true);
+      }
+    });
     this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
     this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
     this.$overlay.on('click', () => this.toggleSidebarNav(false));
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 4bbd30056a9..e4c12e46056 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -99,6 +99,13 @@ $new-sidebar-collapsed-width: 50px;
   box-shadow: inset -2px 0 0 $border-color;
   transform: translate3d(0, 0, 0);
 
+  &:not(.sidebar-icons-only) {
+    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+      box-shadow: inset -2px 0 0 $border-color,
+                  2px 1px 3px $dropdown-shadow-color;
+    }
+  }
+
   &.sidebar-icons-only {
     width: $new-sidebar-collapsed-width;