Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sidebar collapse doesn't work properly #11

Open
jesmith17 opened this issue Nov 18, 2015 · 1 comment
Open

sidebar collapse doesn't work properly #11

jesmith17 opened this issue Nov 18, 2015 · 1 comment

Comments

@jesmith17
Copy link

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.

@HenryVonfire
Copy link

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');
          }
        }
      });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants