How to auto-expand left menu item by default at login with angular/Core 6.9.0 #10066

4 Answer(s)

• 

  0

  ismcagdas created 3 years ago

  Support Team

  Hi,

  Expanded menu items have a specific css class. So, you can add this class to any menu item you want in side-bar-menu.component.ts

  Save Cancel
• 

  0

  schlarmanp created 3 years ago

  Hi - thanks - do you have an example you can provide?

  Save Cancel
• 

  0

  ismcagdas created 3 years ago

  Support Team

  Hi,

  It seems like there is an easier way. When defining a MenuItem in app-navigation.service.ts, just modify code to add a custom field named 'custom-class' to a specific menu item. In that way, this class will be added to menu item when its rendered.

  As an laternative approach, you can define a string field in side-bar-menu.component.ts which will have a value of the route of menu item you want to expand.

  Then, here you can check item's route (or any other unique property) with the string you defined and if they match, menu-item-open class will be added to that menu item. In this if block, you need to set the value of string field you defined before to '', so next time it will not be processed.

  Save Cancel
• 

  0

  schlarmanp created 3 years ago

  Your example appears to be for a later version of asp.net zero angular/core than I have (6.9.0), but it got me pointed in the right direction.

  Turns out I just needed to modify app-ui-customization-service.ts to auto expand the item I wanted (the "Process" menu):

      getSideBarMenuItemClass(item, isMenuActive) {
          let menuCssClass = 'm-menu__item';
  
          if (item.items.length) {
              menuCssClass += ' m-menu__item--submenu';
              //expand process menu by default
              if (item.name == 'Process') {    
                  //set expanded, but not active
                  menuCssClass += ' m-menu__item--open m-menu__item--expanded';
              }
  
          }
          
          if (isMenuActive) {
              menuCssClass += ' m-menu__item--open m-menu__item--expanded m-menu__item--active';
          }
  
          return menuCssClass;
      }
  
  

  Referenced by side-bar-menu-component.html:

  <ng-template #mMenuItem let-item="item" let-parentItem="parentItem">
      <li *ngIf="showMenuItem(item)"
          class="{{ui.getSideBarMenuItemClass(item, isMenuItemIsActive(item))}}"
          aria-haspopup="true"
          [attr.m-menu-submenu-toggle]="ui.getItemAttrSubmenuToggle(item, parentItem)"        
          >
  
  

  Thanks!

  Save Cancel