added ability for auto collapse sidebar option

build/js/PushMenu.js

@@ -22,6 +22,7 @@ const PushMenu = (($) => {
   }
 
   const Default = {
+    autoCollapseSize: false,
     screenCollapseSize: 768
   }
 
@@ -51,6 +52,8 @@ const PushMenu = (($) => {
       this._element = element
       this._options = $.extend({}, Default, options)
 
+      this._init()
+
       if (!$(Selector.OVERLAY).length) {
         this._addOverlay()
       }
@@ -72,23 +75,48 @@ const PushMenu = (($) => {
       $(this._element).trigger(collapsedEvent)
     }
 
-    toggle() {
+    isShown() {
-      let isShown
-
       if ($(window).width() >= this._options.screenCollapseSize) {
-        isShown = !$(Selector.BODY).hasClass(ClassName.COLLAPSED)
+        return !$(Selector.BODY).hasClass(ClassName.COLLAPSED)
       } else {
-        isShown = $(Selector.BODY).hasClass(ClassName.OPEN)
+        return $(Selector.BODY).hasClass(ClassName.OPEN)
       }
 
-      if (isShown) {
+    }
+
+    toggle() {
+      if (this.isShown()) {
         this.collapse()
       } else {
         this.show()
       }
     }
 
+    autoCollapse() {
+      console.log(this._options)
+      if (this._options.autoCollapseSize) {
+        if ($(window).width() <= this._options.autoCollapseSize) {
+          if (this.isShown()) {
+            this.toggle()
+          }
+        } else {
+          if (!this.isShown()) {
+            this.toggle()
+          }
+        }
+      }
+    }
+
     // Private
+
+    _init() {
+      this.autoCollapse()
+
+      $(window).resize(() => {
+        this.autoCollapse()
+      })
+    }
+
     _addOverlay() {
       const overlay = $('<div />', {
         id: 'sidebar-overlay'
@@ -113,7 +141,7 @@ const PushMenu = (($) => {
           $(this).data(DATA_KEY, data)
         }
 
-        if (operation) {
+        if (operation === 'init') {
           data[operation]()
         }
       })
@@ -137,6 +165,10 @@ const PushMenu = (($) => {
     PushMenu._jQueryInterface.call($(button), 'toggle')
   })
 
+  $(window).on('load', () => {
+    PushMenu._jQueryInterface.call($(Selector.TOGGLE_BUTTON))
+  })
+
   /**
    * jQuery API
    * ====================================================

dist/js/adminlte.js

@@ -382,6 +382,7 @@ var PushMenu = function ($) {
   };
 
   var Default = {
+    autoCollapseSize: false,
     screenCollapseSize: 768
   };
 
@@ -413,6 +414,8 @@ var PushMenu = function ($) {
       this._element = element;
       this._options = $.extend({}, Default, options);
 
+      this._init();
+
       if (!$(Selector.OVERLAY).length) {
         this._addOverlay();
       }
@@ -434,34 +437,58 @@ var PushMenu = function ($) {
       $(this._element).trigger(collapsedEvent);
     };
 
-    PushMenu.prototype.toggle = function toggle() {
+    PushMenu.prototype.isShown = function isShown() {
-      var isShown = void 0;
-
       if ($(window).width() >= this._options.screenCollapseSize) {
-        isShown = !$(Selector.BODY).hasClass(ClassName.COLLAPSED);
+        return !$(Selector.BODY).hasClass(ClassName.COLLAPSED);
       } else {
-        isShown = $(Selector.BODY).hasClass(ClassName.OPEN);
+        return $(Selector.BODY).hasClass(ClassName.OPEN);
       }
+    };
 
-      if (isShown) {
+    PushMenu.prototype.toggle = function toggle() {
+      if (this.isShown()) {
         this.collapse();
       } else {
         this.show();
       }
     };
 
+    PushMenu.prototype.autoCollapse = function autoCollapse() {
+      console.log(this._options);
+      if (this._options.autoCollapseSize) {
+        if ($(window).width() <= this._options.autoCollapseSize) {
+          if (this.isShown()) {
+            this.toggle();
+          }
+        } else {
+          if (!this.isShown()) {
+            this.toggle();
+          }
+        }
+      }
+    };
+
     // Private
 
+    PushMenu.prototype._init = function _init() {
+      var _this = this;
+
+      this.autoCollapse();
+
+      $(window).resize(function () {
+        _this.autoCollapse();
+      });
+    };
 
     PushMenu.prototype._addOverlay = function _addOverlay() {
-      var _this = this;
+      var _this2 = this;
 
       var overlay = $('<div />', {
         id: 'sidebar-overlay'
       });
 
       overlay.on('click', function () {
-        _this.collapse();
+        _this2.collapse();
       });
 
       $(Selector.WRAPPER).append(overlay);
@@ -479,7 +506,7 @@ var PushMenu = function ($) {
           $(this).data(DATA_KEY, data);
         }
 
-        if (operation) {
+        if (operation === 'init') {
           data[operation]();
         }
       });
@@ -505,6 +532,10 @@ var PushMenu = function ($) {
     PushMenu._jQueryInterface.call($(button), 'toggle');
   });
 
+  $(window).on('load', function () {
+    PushMenu._jQueryInterface.call($(Selector.TOGGLE_BUTTON));
+  });
+
   /**
    * jQuery API
    * ====================================================

index.html

@@ -37,7 +37,7 @@
     <!-- Left navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a class="nav-link" data-widget="pushmenu" data-screen-collapse-size="768" href="#"><i class="fas fa-bars"></i></a>
+        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
       </li>
       <li class="nav-item d-none d-sm-inline-block">
         <a href="index3.html" class="nav-link">Home</a>
@@ -549,7 +549,7 @@
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">
               <li class="breadcrumb-item"><a href="#">Home</a></li>
-              <li class="breadcrumb-item active">Dashboard v2</li>
+              <li class="breadcrumb-item active">Dashboard v1</li>
             </ol>
           </div><!-- /.col -->
         </div><!-- /.row -->