Skip to content

Unable to use router link on parent items on menu #3284

Open
@leivdimaria

Description

@leivdimaria

I have a dynamic list of categories, with subcategories. Nebular's menu convert all parents instantly to toggles, erasing all props. Only last level childs mantain router.link prop.

I need to tweak the template from

<a
  *ngIf="menuItem.children"
  (click)="$event.preventDefault(); onToggleSubMenu(menuItem)"
  [attr.target]="menuItem.target"
  [attr.title]="menuItem.title"
  [attr.aria-expanded]="menuItem.expanded ?? false"
  [attr.role]="menuItem.ariaRole"
  [class.active]="menuItem.selected"
  (mouseenter)="onHoverItem(menuItem)"
  href="#"
>
  <nb-icon class="menu-icon" [config]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon>
  <span class="menu-title">{{ menuItem.title }}</span>
  <ng-container *ngIf="badge" [ngTemplateOutlet]="badgeTemplate"></ng-container>
  <nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>

to

<a
  *ngIf="menuItem.children"
  (click)="onToggleSubMenu(menuItem)"
  [attr.target]="menuItem.target"
  [attr.title]="menuItem.title"
  [attr.aria-expanded]="menuItem.expanded ?? false"
  [attr.role]="menuItem.ariaRole"
  [class.active]="menuItem.selected"
  [routerLink]="menuItem.link"
  (mouseenter)="onHoverItem(menuItem)"
>
  <nb-icon class="menu-icon" [config]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon>
  <span class="menu-title">{{ menuItem.title }}</span>
  <ng-container *ngIf="badge" [ngTemplateOutlet]="badgeTemplate"></ng-container>
  <nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>

Unchanged code can be found on several folders inside the library.

  • @nebular/theme/components/menu/menu-item.component.html
  • @nebular/theme/esm2020/components/menu/menu.component.mjs
  • @nebular/theme/fesm2015/nebular-theme.mjs
  • @nebular/theme/fesm2020/nebular-theme.mjs

However i tried different approaches

  • Extending the menu component (got error's saying menu-item component has no public classes or something like that)
  • Using patch-package (no matter where i apply the change,delete cache, node_modules, etc. when i run build, i can see that the babel compiled files display no changes)
  • Hooking to the toggle event and add a redirect (this causes funny unwanted behaviours on first loads)
  • Creating a custom component based on the original code in the github (there are so much things linked, i basically have to end up importing almost the entire library again)
  • This would be easy to fix if i had fixed/limited options for the menu, but as these are dynamic, it's not possible.

Any tips or hints on how to achive these in an organic way? can't find any info on the docs, and reviewed some posts here, however was unable to unblock myself with this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions