MegaMenu does not accept a menuitem at root

[pieterlouw1974]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[ x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

What is the motivation / use case for changing the behavior?

Change Megamenu to be clickable on top level as well. On megaMenu if the is a menu item called general, you have a general top menu and a general sub menu with a click event, Only one menu Item is needed.

Propose changes:
MegaMenuModule

template: `
    <div [class]="styleClass" [ngStyle]="style"
        [ngClass]="{'ui-menu ui-menubar ui-megamenu ui-widget ui-widget-content ui-corner-all ui-helper-clearfix':true,'ui-megamenu-vertical': orientation == 'vertical'}">
        <ul class="ui-menu-list ui-helper-reset ui-menubar-root-list">
            <ng-template ngFor let-category [ngForOf]="model">
                <li *ngIf="category.separator" class="ui-menu-separator ui-widget-content">
                <li *ngIf="!category.separator" #item [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':category.items,'ui-menuitem-active':item==activeItem}"
                    (mouseenter)="onItemMouseEnter($event, item, category)" (mouseleave)="onItemMouseLeave($event, item)">
                    <a (click)="itemClick($event, category)" class="ui-menuitem-link ui-corner-all ui-submenu-link" [ngClass]="{'ui-state-disabled':category.disabled}">
                        <span class="ui-menuitem-icon fa fa-fw" [ngClass]="category.icon"></span>
                        <span class="ui-menuitem-text">{{category.label}}</span>
                        <span *ngIf="!category.command" class="ui-submenu-icon fa fa-fw" [ngClass]="{'fa-caret-down':orientation=='horizontal','fa-caret-right':orientation=='vertical'}"></span>
                    </a>
                    <div *ngIf="!category.command" class="ui-megamenu-panel ui-widget-content ui-menu-list ui-corner-all ui-helper-clearfix ui-menu-child ui-shadow">
                        <div class="ui-g">
                            <ng-template ngFor let-column [ngForOf]="category.items">
                                <div [class]="getColumnClass(category)">
                                    <ng-template ngFor let-submenu [ngForOf]="column">
                                        <ul class="ui-menu-list ui-helper-reset">
                                            <li class="ui-widget-header ui-corner-all"><h3>{{submenu.label}}</h3></li>
                                            <ng-template ngFor let-item [ngForOf]="submenu.items">
                                                <li *ngIf="item.separator" class="ui-menu-separator ui-widget-content">
                                                <li *ngIf="!item.separator" class="ui-menuitem ui-widget ui-corner-all">
                                                    <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
                                                        [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
                                                        <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
                                                        <span class="ui-menuitem-text">{{item.label}}</span>
                                                    </a>
                                                    <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'ui-state-active'" 
                                                        [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" 
                                                         [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
                                                        [ngClass]="{'ui-state-disabled':item.disabled}" (click)="itemClick($event, item)">
                                                        <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
                                                        <span class="ui-menuitem-text">{{item.label}}</span>
                                                    </a>
                                                </li>
                                            </ng-template>
                                        </ul>
                                    </ng-template>
                                </div>
                            </ng-template>
                        </div>
                    </div>
                </li>
            </ng-template>
            <li class="ui-menuitem ui-menuitem-custom ui-widget ui-corner-all" *ngIf="orientation === 'horizontal'">
                <ng-content></ng-content>
            </li>
        </ul>
    </div>
`,

[sudheerj]

The motivation or expected behavior is not clear. Can you please explain in detail further on current and expected behavior