ember-admin-dashboards
ember-admin-dashboards copied to clipboard
sidebar collapse doesn't work properly
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.
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');
}
}
});