Adds drop shadow to the expanded sidebar

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

Adds drop shadow to the expanded sidebar
e1af325d · Phil Hughes · Annabel Dunstone Gray · 2f46c3a8 · e1af325d · e1af325d
Commit e1af325d authored Sep 01, 2017 by Phil Hughes Committed by Annabel Dunstone Gray Sep 08, 2017
Hide whitespace changes
Inline Side-by-side

Showing with 12 additions and 0 deletions

new_sidebar.js app/assets/javascripts/new_sidebar.js +5 -0

new_sidebar.scss app/assets/stylesheets/new_sidebar.scss +7 -0

No files found.
--- 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));

--- 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;