Open
Description
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
Labels
No labels