[BUG] Pushmenu plugin not working nicely when using data-auto-collapse-size

Describe the bug The pushmenu plugin is not working nicely if you setup the data-auto-collapse-size to a value less than 992px (or LG breakpoint). The problem is related to the style that is applied to the .content-wrapper, main-header, main-footer, and other elements at the @media (max-width: 991.98px). For example:

@media (max-width: 991.98px) {
  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer,
  body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
    margin-left: 0;
  }
}

As noted, a margin-left property are applied to the elements but the sidebar will remain open, because we have changed the default data-auto-collapse-size of the pushmenu plugin to a lower value:

  /**
   * --------------------------------------------
   * AdminLTE PushMenu.js
   * License MIT
   * --------------------------------------------
   */
  /**
   * Constants
   * ====================================================
   */

  var NAME$5 = 'PushMenu';
  var DATA_KEY$5 = 'lte.pushmenu';
  var EVENT_KEY$2 = "." + DATA_KEY$5;
  var JQUERY_NO_CONFLICT$5 = $__default['default'].fn[NAME$5];
  var EVENT_COLLAPSED$1 = "collapsed" + EVENT_KEY$2;
  var EVENT_SHOWN = "shown" + EVENT_KEY$2;
  var SELECTOR_TOGGLE_BUTTON$1 = '[data-widget="pushmenu"]';
  var SELECTOR_BODY = 'body';
  var SELECTOR_OVERLAY = '#sidebar-overlay';
  var SELECTOR_WRAPPER = '.wrapper';
  var CLASS_NAME_COLLAPSED = 'sidebar-collapse';
  var CLASS_NAME_OPEN$3 = 'sidebar-open';
  var CLASS_NAME_IS_OPENING$1 = 'sidebar-is-opening';
  var CLASS_NAME_CLOSED = 'sidebar-closed';
  var Default$5 = {
    autoCollapseSize: 992,   <====== HERE!!!!!
    enableRemember: false,
    noTransitionAfterReload: true
  };

This will result on a visual issue, as shown next, where you have no way to collapse the sidebar and you can’t see the entire .content-wrapper content when the screen width is lower then 992px and above the configured value that will trigger the auto collapse:

More information about this issue can be found on:

https://github.com/jeroennoten/Laravel-AdminLTE/issues/822

To Reproduce Steps to reproduce the behavior:

1. Enable data-auto-collapse-size as per documented here: https://adminlte.io/docs/3.1//javascript/push-menu.html with a value lower than 992 (for example 600).
2. Play with the browser’s width to reach it under 992px and above the configured value.
3. Check the error explained before.

Expected behavior The .content-wrapper and other element should get the special style related to sidebar collapse mode when you reach the configured value, not on the hardcoded 992px.

Environment (please complete the following information):

• AdminLTE Version: v3.1.0
• Operating System: Not relevant
• Browser (Version): Not relevant

I’m not really sure if this will be easy to be solved, because it involves a mixture between Javascript and CSS compatibility. However, I wanted to describe the problem so you all know about it.

[REJack]

But I will check if I can fix it for now 😄

[REJack]

You should add .sidebar-mini-md for sizes lower than 992px. 😄