fix(SidebarNav): perfect scrollbar issue on sidebar minimized

Author: xidedix

css/scrollbar.css

@@ -0,0 +1,18 @@
+/* rtl fix */
+.ps__rtl .ps__rail-y {
+    left: 0px !important;
+    right: unset;
+}
+*[dir="rtl"] .ps__rail-y {
+    left: 0px !important;
+    right: unset;
+}
+
+.ps__rtl .ps__thumb-y {
+    left: 2px;
+    right: unset;
+}
+*[dir="rtl"] .ps__thumb-y {
+  left: 2px;
+  right: unset;
+}

src/Shared/layout/layout.js

@@ -10,24 +10,58 @@ class LayoutHelper {
   }
 
   static sidebarMinimize(force) {
-    // return this.elClassList.toggle('sidebar-minimized', force);
     return this.toggleClass('sidebar-minimized', force);
   }
 
   static brandMinimize(force) {
-    // this.elClassList.toggle('brand-minimized', force);
     this.toggleClass('brand-minimized', force);
   }
 
-  //  sidebar perfect scrollbar
+  //  sidebar perfect scrollbar ugly hack
   static sidebarPSToggle(toggle) {
+
+    if (this.isOnMobile()) {
+      toggle = true
+    } else {
+      const isSidebarMinimized = document.body.classList.contains('sidebar-minimized') || false
+      toggle = !isSidebarMinimized
+    }
+
+    const ps = { y: { rail: {}, thumb: {} } };
+    const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
     const sidebar = document.querySelector('.sidebar-nav');
+    ps.y.rail.on = document.querySelector('.sidebar-nav .ps__rail-y');
+    ps.y.rail.off = document.querySelector('.sidebar-nav .ps__rail-y-off');
+    ps.y.thumb.on = document.querySelector('.sidebar-nav .ps__thumb-y');
+    ps.y.thumb.off = document.querySelector('.sidebar-nav .ps__thumb-y-off');
     if (sidebar) {
       if (toggle) {
         sidebar.classList.add('ps');
         sidebar.classList.add('ps-container');
         sidebar.classList.add('ps--active-y');
+        if (ps.y.rail.off) {
+          ps.y.rail.off.classList.add('ps__rail-y');
+          ps.y.rail.off.removeAttribute('style');
+          ps.y.rail.off.style.left = isRtl ? '0px' : 'unset';
+          ps.y.rail.off.style.right = isRtl ? 'unset' : '0px';
+          ps.y.rail.off.classList.remove('ps__rail-y-off');
+        }
+        if (ps.y.thumb.off) {
+          ps.y.thumb.off.removeAttribute('style');
+          ps.y.thumb.off.classList.add('ps__thumb-y');
+          ps.y.thumb.off.classList.remove('ps__thumb-y-off');
+        }
       } else {
+        if (ps.y.rail.on) {
+          ps.y.rail.on.classList.add('ps__rail-y-off');
+          ps.y.rail.on.removeAttribute('style');
+          ps.y.rail.on.classList.remove('ps__rail-y');
+        }
+        if (ps.y.thumb.on) {
+          ps.y.thumb.on.classList.add('ps__thumb-y-off');
+          ps.y.thumb.on.removeAttribute('style');
+          ps.y.thumb.on.classList.remove('ps__thumb-y');
+        }
         sidebar.classList.remove('ps');
         sidebar.classList.remove('ps-container');
         sidebar.classList.remove('ps--active-y');
@@ -46,6 +80,23 @@ class LayoutHelper {
     }
     return this.elClassList.contains(className);
   }
+
+  static isOnMobile() {
+    let onMobile = false;
+    try {
+     const minimizerElement = document.querySelector('.sidebar-minimizer');
+     if (minimizerElement) {
+       onMobile = getComputedStyle(minimizerElement).getPropertyValue('display') === 'none';
+     } else {
+       const sidebarElement = document.querySelector('.sidebar .sidebar-nav');
+       sidebarElement && (onMobile = getComputedStyle(sidebarElement).getPropertyValue('overflow-y') === 'auto');
+     }
+    } catch (ignore) {
+      // eslint-disable-next-line
+      console.warn('CoreUI isOnMobile failed to getComputedStyle', ignore)
+    }
+    return onMobile
+  }
 }
 
 export default LayoutHelper;

src/SidebarNav2.js

@@ -4,6 +4,9 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import PerfectScrollbar from 'react-perfect-scrollbar';
 import 'react-perfect-scrollbar/dist/css/styles.css';
+import '../css/scrollbar.css';
+
+import LayoutHelper from './Shared/layout/layout'
 
 const propTypes = {
   children: PropTypes.node,
@@ -39,17 +42,26 @@ class AppSidebarNav2 extends Component {
     this.handleClick = this.handleClick.bind(this);
     this.activeRoute = this.activeRoute.bind(this);
     this.hideMobile = this.hideMobile.bind(this);
+
+    this.changes = null;
+    this.state = { sidebarMinimized: false }
   }
 
+  _scrollBarRef = null;
+
   handleClick(e) {
     e.preventDefault();
     e.currentTarget.parentElement.classList.toggle('open');
   }
 
-  activeRoute(routeName, props) {
+  isActiveRoute(routeName, props) {
     return props.location.pathname.indexOf(routeName) > -1
-      ? 'nav-item nav-dropdown open'
-      : 'nav-item nav-dropdown';
+  }
+
+  activeRoute(routeName, props) {
+    return this.isActiveRoute(routeName, props) ?
+      'nav-item nav-dropdown open' :
+      'nav-item nav-dropdown';
   }
 
   hideMobile() {
@@ -148,6 +160,7 @@ class AppSidebarNav2 extends Component {
 
   // nav link
   navLink(item, key, classes) {
+    const ref = React.createRef();
     const url = item.url || '';
     const itemIcon = <i className={classes.icon} />
     const itemBadge = this.navBadge(item.badge)
@@ -171,7 +184,7 @@ class AppSidebarNav2 extends Component {
             <RsNavLink href={url} className={classes.link} active {...attributes}>
               {itemIcon}{item.name}{itemBadge}
             </RsNavLink> :
-            <NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile} {...attributes}>
+            <NavLink to={url} className={classes.link} activeClassName="active" onClick={() => this.hideMobile(ref)} ref={ref} {...attributes}>
               {itemIcon}{item.name}{itemBadge}
             </NavLink>
         }
@@ -200,6 +213,45 @@ class AppSidebarNav2 extends Component {
     return link.substring(0, 4) === 'http';
   }
 
+  observeDomMutations() {
+    if (window.MutationObserver) {
+
+      // eslint-disable-next-line
+      this.changes = new MutationObserver((mutations) => {
+
+        const isSidebarMinimized = document.body.classList.contains('sidebar-minimized') || false
+        this.setState({ sidebarMinimized: isSidebarMinimized })
+
+        LayoutHelper.sidebarPSToggle(!isSidebarMinimized)
+
+      });
+      const element = document.body;
+      this.changes.observe(element, {
+        attributes: true,
+        attributeFilter: ['class']
+      });
+    }
+    window.addEventListener('resize', this.onResize);
+  }
+
+  onResize() {
+    LayoutHelper.sidebarPSToggle(true)
+  }
+
+  componentDidMount() {
+    this.observeDomMutations()
+  }
+
+  componentWillUnmount() {
+    try {
+      this.changes.disconnect()
+      window.removeEventListener('resize', this.onResize);
+    } catch (ignore) {
+      // eslint-disable-next-line
+      console.warn('CoreUI SidebarNav failed to disconnect from MutationObserver', ignore)
+    }
+  }
+
   render() {
     const { className, children, navConfig, ...attributes } = this.props;
 
@@ -208,18 +260,17 @@ class AppSidebarNav2 extends Component {
     delete attributes.Tag
     delete attributes.router
 
-    const navClasses = classNames(className, 'sidebar-nav');
+    const navClasses = classNames(className, 'sidebar-nav')
 
-    // ToDo: find better rtl fix
-    const isRtl = getComputedStyle(document.documentElement).direction === 'rtl'
+    const options = Object.assign({}, { suppressScrollX: true, suppressScrollY: this.state.sidebarMinimized })
 
     // sidebar-nav root
     return (
-      <PerfectScrollbar className={navClasses} {...attributes} options={{ suppressScrollX: !isRtl }} >
-        <Nav>
-          {children || this.navList(navConfig.items)}
-        </Nav>
-      </PerfectScrollbar>
+        <PerfectScrollbar className={navClasses} {...attributes} options={options} ref = {(ref) => { this._scrollBarRef = ref; }} >
+          <Nav>
+            {children || this.navList(navConfig.items)}
+          </Nav>
+        </PerfectScrollbar>
     );
   }
 }