0
doubledp created
How many levels of navigation is supported? It would appear that I can only dive 1 level.
The AppPermissionsProvider seems to cater for multi levels as they appear in the treemenu as defined in the code, but from the HTML point of view, it does not reflect the multi menu correctly as defined in the AppNavigationProvider.
I had a look at the Metronic demo and it does seem like you can dive 3 levels.
Is it just a case of amending the sidebar.cshtml in App\common\views\layout.cshtml?
5 Answer(s)
-
0
It would appear that the only change required was as I predicted. For anybody interested I will include the code changes that I have made:
<div class="page-sidebar md-shadow-z-2-i navbar-collapse collapse"> <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}" ng-if="vm.menu.items.length"> <li ng-repeat="menuItem in vm.menu.items" ui-sref-active="active" ng-class="{'start':$first}"> <a ui-sref="{{menuItem.url}}" ng-if="!menuItem.items.length"> <i class="{{menuItem.icon}}"></i> <span class="title">{{menuItem.displayName}}</span> </a> <a href="javascript:;" class="auto" ng-if="menuItem.items.length"> <i class="{{menuItem.icon}}"></i> <span class="title">{{menuItem.displayName}}</span> <span class="arrow "></span> </a> <ul class="sub-menu" ng-if="menuItem.items.length"> <li ng-repeat="childMenuItem in menuItem.items" ui-sref-active="active" ng-class="{'start':$first}"> <a ui-sref="{{childMenuItem.url}}" ng-if="!childMenuItem.items.length"> <i class="{{childMenuItem.icon}}"></i> <span class="title">{{childMenuItem.displayName}}</span> </a> <a href="javascript:;" class="auto" ng-if="childMenuItem.items.length"> <i class="{{childMenuItem.icon}}"></i> <span class="title">{{childMenuItem.displayName}}</span> <span class="arrow "></span> </a> <ul class="sub-menu" ng-if="childMenuItem.items.length"> <li ng-repeat="childOfChildMenuItem in childMenuItem.items" ui-sref-active="active" ng-class="{'start':$first}"> <a ui-sref="{{childOfChildMenuItem.url}}" ng-if="!childOfChildMenuItem.items.length"> <i class="{{childOfChildMenuItem.icon}}"></i> <span class="title">{{childOfChildMenuItem.displayName}}</span> </a> <a href="javascript:;" class="auto" ng-if="childOfChildMenuItem.items.length"> <i class="{{childOfChildMenuItem.icon}}"></i> <span class="title">{{childOfChildMenuItem.displayName}}</span> <span class="arrow "></span> </a> <ul class="sub-menu" ng-if="childOfChildOfChildMenuItem.items.length"> <li ui-sref-active="active" ng-repeat="childOfChildOfChildMenuItem in childOfChildMenuItem.items"> <a ui-sref="{{childOfChildOfChildMenuItem.url}}"> <span> <i class="sub-menu-icon {{childOfChildOfChildMenuItem.icon}}"></i>{{childOfChildOfChildMenuItem.displayName}} </span> </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> -
0
Thank you very much for sharing the code.
-
0
No problem, glad to be making a contribution :D
-
0
There is a bug on the level 4 menu.. I have corrected it now. Here is the updated code:
<div class="page-sidebar md-shadow-z-2-i navbar-collapse collapse"> <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}" ng-if="vm.menu.items.length"> <li ng-repeat="menuItem in vm.menu.items" ui-sref-active="active" ng-class="{'start':$first}"> <a ui-sref="{{menuItem.url}}" ng-if="!menuItem.items.length"> <i class="{{menuItem.icon}}"></i> <span class="title">{{menuItem.displayName}}</span> </a> <a href="javascript:;" class="auto" ng-if="menuItem.items.length"> <i class="{{menuItem.icon}}"></i> <span class="title">{{menuItem.displayName}}</span> <span class="arrow "></span> </a> <ul class="sub-menu" ng-if="menuItem.items.length"> <li ng-repeat="childMenuItem in menuItem.items" ui-sref-active="active" ng-class="{'start':$first}"> <a ui-sref="{{childMenuItem.url}}" ng-if="!childMenuItem.items.length"> <i class="{{childMenuItem.icon}}"></i> <span class="title">{{childMenuItem.displayName}}</span> </a> <a href="javascript:;" class="auto" ng-if="childMenuItem.items.length"> <i class="{{childMenuItem.icon}}"></i> <span class="title">{{childMenuItem.displayName}}</span> <span class="arrow "></span> </a> <ul class="sub-menu" ng-if="childMenuItem.items.length"> <li ng-repeat="childOfChildMenuItem in childMenuItem.items" ui-sref-active="active" ng-class="{'start':$first}"> <a ui-sref="{{childOfChildMenuItem.url}}" ng-if="!childOfChildMenuItem.items.length"> <i class="{{childOfChildMenuItem.icon}}"></i> <span class="title">{{childOfChildMenuItem.displayName}}</span> </a> <a href="javascript:;" class="auto" ng-if="childOfChildMenuItem.items.length"> <i class="{{childOfChildMenuItem.icon}}"></i> <span class="title">{{childOfChildMenuItem.displayName}}</span> <span class="arrow "></span> </a> <ul class="sub-menu" ng-if="childOfChildMenuItem.items.length"> <li ui-sref-active="active" ng-repeat="childOfChildOfChildMenuItem in childOfChildMenuItem.items"> <a ui-sref="{{childOfChildOfChildMenuItem.url}}"> <span> <i class="sub-menu-icon {{childOfChildOfChildMenuItem.icon}}"></i>{{childOfChildOfChildMenuItem.displayName}} </span> </a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> -
0
Thanks again :)
Have an answer to this question?
Log in
and write your answer.