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