question about how to make level 2 sub menu using route congifuration

[rayeteu]

Hello

I am working on the sidebar.

I succeeded in making level 2 sub menu using manual configuration explained on http://akveo.github.io/blur-admin/articles/051-sidebar/
But I could not make level 2 sub menu using router configuration even though level 1 sub menu was created.

Please, help me and let's me know how to make level 2 sub menu suing router configuration.

[vazh]

images of the problem and expected result please. to avoid different view of what sub and level is.

[rayeteu]

barSidebarService example:

baSidebarServiceProvider.addStaticItem({
title: 'Menu Level 1',
icon: 'ion-ios-more',
subMenu: [{
title: 'Menu Level 1.1',
disabled: true
}, {
title: 'Menu Level 1.2',
subMenu: [{
title: 'Menu Level 1.2.1',
disabled: true
}]
}]
});

Result :

I can see level 2 menu.

Route configuration example:
-----------------------------------sidebar menu(componenet)------------------------------------
(function () {
'use strict';

angular.module('BlurAdmin.pages.components', [
'BlurAdmin.pages.components.mail',
])
.config(routeConfig);

/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('components', {
url: '/components',
template : '',
abstract: true,
title: 'Components',
sidebarMeta: {
icon: 'ion-gear-a',
order: 100,
},
});
}
})();
--------------------------------componenet submenu(level 1)----------------------------------------

angular.module('BlurAdmin.pages.components.mail', [
'BlurAdmin.pages.components.mail.menu'
])
.config(routeConfig);

/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('components.mail', {
url: '/mail',
abstract: true,
templateUrl: 'app/pages/components/mail/mail.html',
controller: "MailTabCtrl",
controllerAs: "tabCtrl",
title: 'Mail',
sidebarMeta: {
order: 0,
},
})();
---------------------------componenet submenu-submenu(level 2)--------------------------------

angular.module('BlurAdmin.pages.components.mail.menu', [])
.config(routeConfig);

/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('components.mail.menu', {
url: '/menu',
templateUrl: 'app/pages/components/mail/menu.html',
title: 'Menu',
sidebarMeta: {
order: 10,
},
})();

Result :

I can't see level 2 menu.

[vazh]

try using parent instead of writing route name with components.mail.menu

.state('mail.menu', {
  parent: 'components'
});

try like that,

[NanFengCheong]

@vazh still not working, tried
.state('mail.menu', { parent: 'components' });
.state('menu', { parent: 'components.mail' });
.state('menu', { parent: 'mail' });

[vazh]

@DJPeace

• Components
  • Mail
    • Menu

is that how you wanted it ?
which means you need to make mail into abstract i think. didn't try, but since components was an abstract state too. so it's possible.

[heshamelmasry77]

i still have the same problem

[Davidmq96]

@heshamelmasry77 @DJPeace Did you could resolve the problem?

[rayeteu]

@Davidmq96 I did not solve it.

[NanFengCheong]

#337 try and replace getMenuItems in blur-admin/src/app/theme/components/baSidebar/baSidebar.service.js

[l7wahn]

change the this.getMenuItems function body on src/app/theme/components/baSidebar/baSidebar.service.js to this:

`

     var states = defineMenuItemStates();
      var menuItems = states.filter(function(item) {
        return item.level == 0;
      });

      menuItems.forEach(function(item) {
        var children = states.filter(function(child) {
          return child.level == 1 && child.name.indexOf(item.name) === 0;
        });

        children.forEach(function(item) {
            var children = states.filter(function(child) {
                return child.level == 2 && child.name.indexOf(item.name) === 0;
            });
            item.subMenu = children.length ? children : null;
        });

        item.subMenu = children.length ? children : null;
      });

      return menuItems.concat(staticMenuItems);

`

Good luck, it worked for me

[RenatoAlves0]

You should go to "src/app/theme/components/baSidebar/baSidebar.service.js" and add this code.
With it you can go to level 3.

          //Menu level 0
            this.getMenuItems = function () {
                var states = defineMenuItemStates();
                var children0 = states.filter(function (child0) {
                    return child0.level == 0;
                });

                //Menu level 1
                children0.forEach(function (item1) {
                    var children1 = states.filter(function (child1) {
                        return child1.level == 1 && child1.name.indexOf(item1.name) === 0;
                    });

                    //Menu level 2
                    children1.forEach(function (item2) {
                        var children2 = states.filter(function (child2) {
                            return child2.level == 2 && child2.name.indexOf(item2.name) === 0;

                        });

                        //Menu level 3
                        children2.forEach(function (item3) {
                            var children3 = states.filter(function (child3) {
                                return child3.level == 3 && child3.name.indexOf(item3.name) === 0;
                            });

                            item3.subMenu = children3.length ? children3 : null;
                        });

                        item2.subMenu = children2.length ? children2 : null;
                    });

                    item1.subMenu = children1.length ? children1 : null;
                });

                return children0.concat(staticMenuItems);
            };