feat: hide onclick outside mobile sidebar

Author: xidedix

demo/src/polyfill.js

@@ -26,6 +26,8 @@ import 'core-js/es7/object'
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 // import 'core-js/es7/reflect'
 
+import 'element-closest'
+
 // CustomEvent() constructor functionality in IE9, IE10, IE11
 (function () {
 

package.json

@@ -38,17 +38,19 @@
     "@coreui/icons": "0.2.0",
     "classnames": "^2.2.6",
     "core-js": "^2.5.7",
+    "element-closest": "^2.0.2",
     "prop-types": "^15.6.2",
+    "react-onclickout": "^2.0.8",
     "react-perfect-scrollbar": "^1.1.1",
     "react-router-dom": "^4.3.1",
-    "reactstrap": "^6.1.0"
+    "reactstrap": "^6.3.0"
   },
   "peerDependencies": {
     "@coreui/coreui": "^2.0.2",
     "react": "16.x"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.5",
+    "babel-eslint": "^8.2.6",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.19.1",

src/Sidebar.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { sidebarCssClasses } from './Shared';
+import ClickOutHandler from 'react-onclickout'
+import 'element-closest'
 
 const propTypes = {
   children: PropTypes.node,
@@ -35,6 +37,7 @@ class AppSidebar extends Component {
     this.isMinimized = this.isMinimized.bind(this);
     this.isOffCanvas = this.isOffCanvas.bind(this);
     this.displayBreakpoint = this.displayBreakpoint.bind(this);
+    this.hideMobile = this.hideMobile.bind(this);
   }
 
   componentDidMount() {
@@ -70,6 +73,19 @@ class AppSidebar extends Component {
     document.body.classList.add(cssClass);
   }
 
+  hideMobile() {
+    if (document.body.classList.contains('sidebar-show')) {
+      document.body.classList.remove('sidebar-show');
+    }
+  }
+
+  onClickOut(e) {
+    if (!e.target.closest('[data-sidebar-toggler]')) {
+      this.hideMobile();
+    }
+
+  }
+
   render() {
     const { className, children, tag: Tag, ...attributes } = this.props;
 
@@ -85,9 +101,11 @@ class AppSidebar extends Component {
 
     // sidebar-nav root
     return (
-      <Tag className={classes} {...attributes}>
-        {children}
-      </Tag>
+      <ClickOutHandler onClickOut={(e) => {this.onClickOut(e)}}>
+        <Tag className={classes} {...attributes}>
+          {children}
+        </Tag>
+      </ClickOutHandler>
     );
   }
 }

src/SidebarToggler.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { sidebarCssClasses } from './Shared/index';
+import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from './Shared/index';
 import toggleClasses from './Shared/toggle-classes';
 
 const propTypes = {
@@ -28,18 +28,16 @@ class AppSidebarToggler extends Component {
 
   sidebarToggle(e) {
     e.preventDefault();
+    this.toggle();
+  }
 
-    if (this.props.mobile) {
-      document.body.classList.toggle('sidebar-show');
-    } else {
-      const display = this.props.display;
-      const cssTemplate = `sidebar-${display}-show`;
-      let [cssClass] = sidebarCssClasses[0];
-      if (display && sidebarCssClasses.indexOf(cssTemplate) > -1) {
-        cssClass = cssTemplate;
-      }
-      toggleClasses(cssClass, sidebarCssClasses);
+  toggle(force) {
+    const [display, mobile] = [this.props.display, this.props.mobile]
+    let cssClass = sidebarCssClasses[0]
+    if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
+      cssClass = `sidebar-${display}-show`
     }
+    toggleClasses(cssClass, sidebarCssClasses, force)
   }
 
   render() {
@@ -51,7 +49,7 @@ class AppSidebarToggler extends Component {
     const classes = classNames(className, 'navbar-toggler');
 
     return (
-      <Tag type="button" className={classes} {...attributes} onClick={(event)=>this.sidebarToggle(event)}>
+      <Tag type="button" className={classes} {...attributes} onClick={(event)=>this.sidebarToggle(event)} data-sidebar-toggler>
         {children || <span className="navbar-toggler-icon" />}
       </Tag>
     );