refactor(components): minor fixes & cleanup

Author: xidedix

src/AsideToggler.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { asideMenuCssClasses } from './Shared/index';
-import { ToggleClasses } from './Shared/toggle-classes';
+import toggleClasses from './Shared/toggle-classes';
 
 const propTypes = {
   children: PropTypes.node,
@@ -40,7 +40,7 @@ class AppAsideToggler extends Component {
       if (display && asideMenuCssClasses.indexOf(cssTemplate) > -1) {
         cssClass = cssTemplate;
       }
-      ToggleClasses(cssClass, asideMenuCssClasses);
+      toggleClasses(cssClass, asideMenuCssClasses);
     }
   }
 
@@ -54,7 +54,7 @@ class AppAsideToggler extends Component {
           type="button"
           className={classes}
           {...attributes}
-          onClick={this.asideToggle}
+          onClick={(event)=>this.asideToggle(event)}
       >
         {children || <span className="navbar-toggler-icon" />}
       </button>

src/Breadcrumb.js

@@ -31,15 +31,14 @@ const BreadcrumbsItem = ({ match }) => {
   const routeName = findRouteName(match.url);
   if (routeName) {
     return (
-      match.isExact ? 
+      match.isExact ?
         <BreadcrumbItem active>{routeName}</BreadcrumbItem>
-       : 
+       :
         <BreadcrumbItem>
           <Link to={match.url || ''}>
             {routeName}
           </Link>
         </BreadcrumbItem>
-      
     );
   }
   return null;

src/Shared/toggle-classes.js

@@ -1,16 +1,6 @@
-const RemoveClasses = (NewClassNames) => {
-  const MatchClasses = NewClassNames.map(Class => document.body.classList.contains(Class));
-  return MatchClasses.indexOf(true) !== -1;
-};
-
-const ToggleClasses = (Toggle, ClassNames) => {
-  const Level = ClassNames.indexOf(Toggle);
-  const NewClassNames = ClassNames.slice(0, Level + 1);
-  if (RemoveClasses(NewClassNames)) {
-    NewClassNames.map(Class => document.body.classList.remove(Class));
-  } else {
-    document.body.classList.add(Toggle);
-  }
-};
-
-export { ToggleClasses };
+export default function toggleClasses (toggleClass, classList) {
+  const level = classList.indexOf(toggleClass)
+  const removeClassList = classList.slice(0, level)
+  removeClassList.map((className) => document.body.classList.remove(className))
+  document.body.classList.toggle(toggleClass)
+}

src/SidebarMinimizer.js

@@ -15,10 +15,20 @@ const defaultProps = {
 };
 
 class AppSidebarMinimizer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
   sidebarMinimize(e) {
     // e.preventDefault();
 
     document.body.classList.toggle('sidebar-minimized');
+    const sidebar = document.querySelector('.sidebar-nav')
+    if (sidebar) {
+      sidebar.classList.toggle('ps');
+      sidebar.classList.toggle('scrollbar-container');
+    }
   }
 
   brandMinimize(e) {
@@ -27,13 +37,18 @@ class AppSidebarMinimizer extends Component {
     document.body.classList.toggle('brand-minimized');
   }
 
+  handleClick(e) {
+    this.sidebarMinimize(e)
+    this.brandMinimize(e)
+  }
+
   render() {
     const { className, children, tag: Tag, type, ...attributes } = this.props;
 
     const classes = classNames(className, 'sidebar-minimizer', 'mt-auto');
 
     return (
-      <Tag className={classes} type={type} {...attributes} onClick={(event) => { this.sidebarMinimize(event); this.brandMinimize(event); }} >
+      <Tag className={classes} type={type} {...attributes} onClick={(event)=>this.handleClick(event)} >
         {children}
       </Tag>
     );

src/SidebarNav.js

@@ -171,7 +171,7 @@ class AppSidebarNav extends Component {
 
     // sidebar-nav root
     return (
-      <PerfectScrollbar className={navClasses} {...attributes}>
+      <PerfectScrollbar className={navClasses} {...attributes} option={{ suppressScrollX: true }} >
         <Nav>
           {children || this.navList(navConfig.items)}
         </Nav>

src/SidebarToggler.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { sidebarCssClasses } from './Shared/index';
-import { ToggleClasses } from './Shared/toggle-classes';
+import toggleClasses from './Shared/toggle-classes';
 
 const propTypes = {
   children: PropTypes.node,
@@ -38,7 +38,7 @@ class AppSidebarToggler extends Component {
       if (display && sidebarCssClasses.indexOf(cssTemplate) > -1) {
         cssClass = cssTemplate;
       }
-      ToggleClasses(cssClass, sidebarCssClasses);
+      toggleClasses(cssClass, sidebarCssClasses);
     }
   }
 
@@ -48,7 +48,7 @@ class AppSidebarToggler extends Component {
     const classes = classNames(className, 'navbar-toggler');
 
     return (
-      <Tag type="button" className={classes} {...attributes} onClick={this.sidebarToggle}>
+      <Tag type="button" className={classes} {...attributes} onClick={(event)=>this.sidebarToggle(event)}>
         {children || <span className="navbar-toggler-icon" />}
       </Tag>
     );