ember-admin-dashboards icon indicating copy to clipboard operation
ember-admin-dashboards copied to clipboard

sidebar collapse doesn't work properly

Open jesmith17 opened this issue 9 years ago • 1 comments

The sidebar collapse for the left side navigation bar doesn't work properly. If you look at the base AdminLTE template, the collapse reduces the sidebar down to a icon only navigation bar when working in a full screen display (non-mobile).

It does this by the data-toggle operation to collapse link adding the sidebar-collapse class to the same element that has the sidebar-mini class. In the AdminLTE preview this happens to be the root body element.

However, when you add these classes directly to the body element in Ember, they get ignored. As a result when the sidebar-collapse class gets applied to the body element, the entire sidebar disappears.

I have tried to fix this in both the ember-admin-dashboard, and in other custom implementations of the AdminLTE template. The problem seems to be the way the combination of the way the data-toggle action tries to apply the sidebar-collapse class and how Ember overrides the classes on the body element. I have tried to use the data-target on the link object to force the sidebar-collapse style to get applied to the same element that contains the sidebar-mini style, but that doesn't seem to work as it continues to apply it to the root element.

jesmith17 avatar Nov 18 '15 22:11 jesmith17

This should solve this issue:

    Ember.$.AdminLTE.pushMenu = function (toggleBtn) {
      //Enable sidebar toggle
Ember.$(toggleBtn).click(function (e) {
        e.preventDefault();
        //Enable sidebar push menu
        const body = Ember.$("body");
        if(!body.hasClass('sidebar-collapse') && !body.hasClass('sidebar-open')){
          body.addClass('sidebar-collapse');
          body.addClass('sidebar-mini');
        } else {
          if(body.hasClass('sidebar-open')){
            body.removeClass('sidebar-open');
            body.addClass('sidebar-mini');
            body.addClass('sidebar-collapse');
          }
          else {
            body.removeClass('sidebar-mini');
            body.removeClass('sidebar-collapse');
            body.addClass('sidebar-open');
          }
        }
      });

HenryVonfire avatar Feb 24 '16 10:02 HenryVonfire