Sidebar menu broken with 2.4.0

[fplini]

Hi, I'm using admin-lte since one year. I have an angular 4 app and I build the sidebar menu dinamically and all worked fine until version 2.3.11 . With 2.4.0 when I click on a first node of the menu the app reload the page instead of open the sub menu.

[silverxjohn]

I am having this issue, too. Before the upgrade, it's all working perfectly until the release of 2.4.0

Expected Behavior:

1. Click on a Menu with Sub-Menu
2. Site should display all the sub-menu

How the system is actually behaving:

1. Click on a Menu with Sub-menu
2. The page reloads

[cewlbird]

Hi @fplini and @silverxjohn,

try adding this as your opening tag of the sidebar:

<ul class="sidebar-menu" data-widget="tree">

I had the same problem, now it works again. Looks like the sidebar markup changed a little bit.

Best Regards

[fplini]

It doesn't work for me

[Smekkel]

https://adminlte.io/docs/2.4/upgrade-guide

[TwanoO67]

also tried to add date-widget=tree in a ng4 app but it does not fix the menu. Any other idea ?

[alexdresko]

I have spent too many hours this weekend trying to get the side bar working again since upgrading to 2.4. I'm also having the body height issue. Completely frustrated. Going back to 2.3.

[almasaeed2010]

I am not sure why the data attribute is not working :(

You could try the alternative by using the jQuery plugin directly:

$('.sidebar-menu').tree({
// Any options here
})

Documentation: https://adminlte.io/docs/2.4/js-tree

[REBELinBLUE]

Did you remember to change data-toggle="offcanvas" to data-toggle="push-menu" for the button which toggles it? That is what I missed

[TwanoO67]

Yes that made the menu "burger" toggling work again, but it has nothing to do with the sub menu opening

[REBELinBLUE]

Ah, sorry yeah I misunderstood the issue!

[JiNexus]

I can still replicate the issue, I hope this will be fix soon. I have to revert back to 2.3.x at the moment coz I prefer using data attributes.

[sourcecodes2]

I'm having the same issue, having also spent a lot of time trying to fix it. Nothing in the upgrade guides help.

[almasaeed2010]

Since I didn't get a response on my comment https://github.com/almasaeed2010/AdminLTE/issues/1666#issuecomment-335041188

Did you attempt adding data-widget="tree" on the .sidebar-menu element? You could also use the tree jquery plugin as mentioned above:

$('.sidebar-menu').tree({
  // Any options here
})

Thanks!

[darrinsimmons]

I'm having the same issue. I have a vanilla meanjs installation: https://github.com/meanjs/mean where I created a sidebar.client.view.html and copied the AdminLTE theme index.html into it starting with:

ul class="sidebar-menu" data-widget="tree"

The sidebar shows up fine. When I minimize it and hover over the elements, the submenus are shown correctly and I can click on any of the submenus and get the expected "page not found" since I did not setup the pages. When I maximize the sidebar and click on any of the menu items, no submenu is shown.

I have just created a new private github repository that I can share with you if you wish to bypass the setup of the environment. I am using: "admin-lte": "^2.4.2" "meanjs-version": "0.6.0"

[JiNexus]

@almasaeed2010 I think I have an idea now why my sidebar menu is broken with 2.4.0, I was trying to load adminlte.min.js via require.js, however when I tried to load adminlte.min.js via simple <script> the sidebar menu is now back and working. As of the moment I don't know what's the main reason. I have to investigate this when I have a chance.

[bgarrison25]

This is not working for me as well. I have admin-lte version 2.4.0 and made sure all upgrade rules were followed

[gerryge]

I'm having the same issue, having also spent a lot of time trying to fix it. When I added data-widget="tree" on the .sidebar-menu element, it block my other items which not have sub-items clicking. I remove data-widget="tree", I can click again, but cannot expand the sub-items.

I use version v 2.42.

[darrinsimmons]

My issue was that when the sidebar was "maximized", I could not click on any headers to show the submenus. When the sidebar was "minimized", everything worked fine.

For those with this issue, here is some code I put into my Angular.js nav.client.controller.js With this code, you can open/close the menus as expected, however, it doesn't work on mobile devices. As you can see in my comments, more experienced coders will complain that the controller is directly manipulating the DOM, but I did not find anything else that shows a "better" way to do this.

(function () { 'use strict';

angular
    .module('core')
    .controller('NavController', NavController);

NavController.$inject = ['$scope', '$state', 'Authentication', 'menuService', '$window'];

function NavController($scope, $state, Authentication, menuService, $window) {
    // Expose view variables
    $scope.$state = $state;
    $scope.authentication = Authentication;
    $scope.isCollapsed = false;

    // Get the sidebar menu
    $scope.menu = menuService.getMenu('sidebar');

    // Toggle the menu items
    $scope.toggleCollapsibleMenu = function () {
        // Everyone says this is bad coding, but there is a bug in AdminLTE
        // This is still not ideal.  You want to be able to see which submenu item is active even if you close
        // The parent menu by having the parent menu be "active", but not open.  menu-open class is
        // supposed to do this, but it is not working right now...

        var target = $(window.document.activeElement.parentElement);

        if (target.hasClass('active')) {
            target.removeClass('active');
            target.removeClass('menu-open');
        } else {
            target.addClass('active');
            target.addClass('menu-open');
        }
    };

    // Collapsing the menu after navigation
    $scope.$on('$stateChangeSuccess', function () {
      $scope.isCollapsed = false;
    });

}

}());

=================================== For reference, here is my html:

• MAIN NAVIGATION
• {{::item.title}}
  • {{::item.title}}
  {{::item.title}}

• TEST NAVIGATION
• Dashboard
  • Dashboard v1
  • Dashboard v2

[SLTsoftware]

Hi. Is there a solution for this issue? I have v2.4.3 with a Angular app in Visual Studio 2017 and can't get the submenu working. Tried different thinks from here but no success. Menu open in small/mobile mode but expanded menu can not expand submenus. When I click it I'm redirected to home page. Tried to use a blank app with your starting page from website as html code. Is there a version before I can use? I use: ASP.NET core 2.0 with Angular in VS 2017.

EDIT: OK, I found a solution for this issue that works for me, here is the link: https://github.com/almasaeed2010/AdminLTE/issues/1570

All references added to my angular-cli.json file and not in the html itself, and adding the code for tree in my onInit(), now all works fine.

[warmwind]

For me, it could work by adding a tree class and data widget to sidebar-menu like below:

<ul class="sidebar-menu tree" data-widget="tree">

[jeescu]

So the temporary solution here is initializing the tree whenever that sidebar component is loaded:

$('.sidebar-menu').tree();

So tell us what's the treeview implementation difference between 2.3 and 2.4.x or just try to support it next time. Thanks. :)

[tarekRh]

Hi, this issue is related to the initialization of treeview, it will be done after the loading of the page (load handler). So the solution is initializing the treeview by the "ready" handler in adminLte.js file.

$(document).ready(() => { if($('[data-widget="treeview"]').length > 0){ $('[data-widget="treeview"]').each(function () { Treeview._jQueryInterface.call($(this), 'init'); }); } });

Thanks. :)

[rijans]

Besides, <ul class="sidebar-menu" data-widget="tree"> If your Sidebar Toggle is not working, do: Change data-toggle="offcanvas" to data-toggle="push-menu"