refactor(Sidebar): refactor responsive behavior

Author: mrholek

js/src/sidebar.js

@@ -43,12 +43,9 @@ const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_SIDEBAR = 'sidebar'
 const CLASS_NAME_SIDEBAR_NARROW = 'sidebar-narrow'
 const CLASS_NAME_SIDEBAR_OVERLAID = 'sidebar-overlaid'
-const CLASS_NAME_SIDEBAR_SELF_HIDDING = 'sidebar-self-hidding'
 const CLASS_NAME_SIDEBAR_NARROW_UNFOLDABLE = 'sidebar-narrow-unfoldable'
 
-// eslint-disable-next-line prefer-regex-literals
 const REGEXP_SIDEBAR_SELF_HIDING = /sidebar-self-hiding/
-// const REGEXP_SIDEBAR_SHOW = new RegExp('sidebar.*show')
 const REGEXP_SIDEBAR_SHOW_BREAKPOINT = /sidebar-(sm|md|lg|xl|xxl)-show/
 
 const EVENT_HIDE = `hide${EVENT_KEY}`
@@ -100,12 +97,6 @@ class Sidebar extends BaseComponent {
   show() {
     EventHandler.trigger(this._element, EVENT_SHOW)
 
-    // if (typeof breakpoint !== 'undefined') {
-    //   this._breakpoint = breakpoint
-    // }
-
-    // this._element.classList.add(this._createShowClass())
-
     if (this._element.classList.contains(CLASS_NAME_HIDE)) {
       this._element.classList.remove(CLASS_NAME_HIDE)
     }
@@ -144,16 +135,6 @@ class Sidebar extends BaseComponent {
 
     this._element.classList.add(CLASS_NAME_HIDE)
 
-    // if (!this._element.className.match(REGEXP_SIDEBAR_SELF_HIDING)) {
-    //   this._element.classList.add(CLASS_NAME_HIDE)
-    // }
-
-    // this._element.classList.forEach(className => {
-    //   if (className.match(REGEXP_SIDEBAR_SHOW)) {
-    //     this._element.classList.remove(className)
-    //   }
-    // })
-
     if (this._isMobile()) {
       this._removeBackdrop()
     }
@@ -176,19 +157,11 @@ class Sidebar extends BaseComponent {
   }
 
   toggle() {
-    // eslint-disable-next-line no-console
-    console.log(this._show)
     if (this._show) {
       this.hide()
       return
     }
 
-    // if (breakpoint === 'all') {
-    //   this._breakpoint = false
-    //   this.show(this._breakpoint)
-    //   return
-    // }
-
     this.show()
   }
 

scss/_variables.scss

@@ -263,7 +263,7 @@ $enable-important-utilities:  true !default;
 
 // Set mobile breakpoint
 
-$mobile-breakpoint:           lg !default;
+$mobile-breakpoint:           md !default;
 
 // Prefix for :root CSS variables
 

scss/sidebar/_sidebar-narrow.scss

@@ -51,12 +51,19 @@
 
 .sidebar-narrow {
   @extend %sidebar-narrow;
+  ~ * {
+    --#{$variable-prefix}sidebar-occupy: #{$sidebar-narrow-width};
+  }
 }
 
 .sidebar-narrow-unfoldable {
   position: fixed !important;
   z-index: $zindex-fixed + 1;
 
+  ~ * {
+    --#{$variable-prefix}sidebar-occupy: #{$sidebar-narrow-width};
+  }
+
   &:not(:hover) {
     @extend %sidebar-narrow;
   }
@@ -72,10 +79,6 @@
       transform: rotate(0deg);
     }
   }
-
-  ~ * {
-    --#{$variable-prefix}sidebar-width: #{$sidebar-narrow-width};
-  }
 }
 
 // Responsive behavior

scss/sidebar/_sidebar.scss

@@ -14,11 +14,15 @@
   box-shadow: none;
   @include transition($sidebar-transition);
 
-  + [data-coreui-reliant="sidebar"] {
-    @include transition($sidebar-reliant-transition);
+  ~ * {
+    --#{$variable-prefix}sidebar-occupy: #{$sidebar-width};
   }
 
-  @include media-breakpoint-down(breakpoint-before($mobile-breakpoint)) {
+  // + [data-coreui-reliant="sidebar"] {
+  //   @include transition($sidebar-reliant-transition);
+  // }
+
+  @include media-breakpoint-down($mobile-breakpoint) {
     // Some of our components use this property to detect if the sidebar has mobile behavior.
     --is-mobile: true;
     position: fixed;
@@ -32,6 +36,10 @@
     &.sidebar-right {
       right: 0;
     }
+
+    ~ * {
+      --#{$variable-prefix}sidebar-occupy: 0;
+    }
   }
 
   &:not(.sidebar-right){
@@ -57,13 +65,21 @@
     &.sidebar-right {
       margin-right: - $sidebar-width;
     }
+
+    ~ * {
+      --#{$variable-prefix}sidebar-occupy: 0;
+    }
   }
 
   @each $width, $value in $sidebar-widths {
     &.sidebar-#{$width} {
       flex: 0 0 $value;
       width: $value;
 
+      ~ * {
+        --#{$variable-prefix}sidebar-occupy: #{$value};
+      }
+
       &:not(.sidebar-right).hide {
         margin-left: - $value;
       }
@@ -177,7 +193,7 @@
   background-color: var(--#{$variable-prefix}sidebar-toggler-bg, $sidebar-toggler-bg);
   border: 0;
 
-  @include media-breakpoint-down(breakpoint-before($mobile-breakpoint)) {
+  @include media-breakpoint-down($mobile-breakpoint) {
     display: none;
   }
 
@@ -214,7 +230,7 @@
 
 // Backdrop background
 .sidebar-backdrop {
-  @include media-breakpoint-down(breakpoint-before($mobile-breakpoint)) {
+  @include media-breakpoint-down($mobile-breakpoint) {
     position: fixed;
     top: 0;
     left: 0;
@@ -253,6 +269,9 @@
           }
         }
       }
+      ~ * {
+        --#{$variable-prefix}sidebar-occupy: 0;
+      }
     }
   }
 }