Multi-level Menu

[dalevaldez09]

How to implement multi-level side bar menu? Need up to 3 level

[erdkse]

Hey, @dalevaldez09 you need to expand the menu-item component. I can do it as well but it will take some time since I have other things to do.

[dalevaldez09]

I'm having a hard time displaying the 3rd level menus, 1st level will collapse

<!--Level 1-->
<a (click)="handleMainMenuAction();"
   class="nav-link"
   [ngClass]="{active: isMainActive || isOneOfChildrenActive}">
  <img [src]="'../../../assets/img/nxpert-icons/'+ menuItem.icon +'.svg'"
       class="nav-icon"
       alt="User Image" />
  <p>
    {{ menuItem.name | translate }}
    <i *ngIf="isExpandable && menuItem.children.length > 0"
       class="right fas fa-angle-left"></i>
  </p>
</a>
<!--Level 2-->
<ul class="nav nav-treeview" *ngFor="let item of menuItem.children">
  <li class="nav-item" *ngIf="appService.hasAccess(item.menuCode)">
    <a [routerLink]="item.path"
       [routerLinkActive]="'active'"
       class="nav-link"
       (click)="handleMainMenuAction();">
      <img [src]="'../../../assets/img/nxpert-icons/'+ item.icon +'.svg'"
           class="nav-icon" />
      <p>
        {{ item.name | translate }}
        <i *ngIf="item.children != undefined ? item.children.length > 0 : false"
           class="right fas fa-angle-left"></i>
      </p>
    </a>
    <!--Level 3-->
    <ul class="nav nav-treeview" *ngFor="let sub of item.children">
      <li class="nav-item" *ngIf="appService.hasAccess(sub.menuCode)">
        <a [routerLink]="sub.path"
           [routerLinkActive]="'active'"
           class="nav-link">
          <img [src]="'../../../assets/img/nxpert-icons/'+ sub.icon +'.svg'"
               class="nav-icon" />
          <p>
            {{ sub.name | translate }}
          </p>
        </a>
      </li>
    </ul>
  </li>
</ul>

[erdkse]

hey @dalevaldez09 , I started working on this

[olayaherrera]

Did you manage to add a third menu?

[olayaherrera]

`<ng-container *ngIf="!menuItem.subOpciones">
 <a
  (click)="handleMainMenuAction()"
  class="nav-link"
  [ngClass]="{active: isMainActive || isOneOfChildrenActive}"
>
  <i class="nav-icon {{ menuItem.iconClasses }}"></i>
  <p>{{ menuItem.nombre }}
    <i
      *ngIf="isExpandable && menuItem.subOpciones.length > 0"
      class="right fas fa-angle-right"
      [@rotate]="isMenuExtended"
    ></i>
  </p>
</a>

</ng-container>
<ng-container *ngIf="menuItem.subOpciones && menuItem.subOpciones.length > 0">
<a
  (click)="handleMainMenuAction()"
  class="nav-link"
  [ngClass]="{active: isMainActive || isOneOfChildrenActive}"
>
  <i class="nav-icon {{ menuItem.iconClasses }}"></i>
  <p> {{menuItem.subOpciones.length}} {{ menuItem.nombre }}
    <i
      *ngIf="isExpandable && menuItem.subOpciones.length > 0"
      class="right fas fa-angle-right"
      [@rotate]="isMenuExtended"
    ></i>
  </p>
</a>
<ul class="nav nav-treeview"  *ngFor="let item of menuItem.subOpciones; index as i" [@openClose]="isMenuExtended">
  <li class="nav-item">
    <a *ngIf="!item.subOpciones"
      [routerLink]="item.url"
      [routerLinkActive]="'active'"
      class="nav-link"
    >
    <i class="nav-icon {{ item.iconClasses }}"></i>
      <p><small>{{i + 1}} {{ item.nombre }}</small></p>
    </a>
    <ng-container *ngIf=" item.subOpciones  ">
       <app-menu-item
         *ngFor="let itemSub of menuItem.subOpciones"
         [menuItem]="itemSub"
       ></app-menu-item>

    </ng-container>
   </li>
</ul>
</ng-container>
`

[Tallman1400]

menu.txt

A more complete version With the ability to enable or disable items Resolve bug of Previous post

[erdkse]

hey @Tallman1400 , if you create a PR that would be better, would you like to consider it?

[lzuhuo]

Hey @erdkse . Some updates about 3rd level?