Menu does not expand when the main item it's not composed by one word

[Kris-I]

Hello,

With the code below, I create an entry in the menu with one sub item. But I can't open the menu item because the main item is composed by several words.

},{
    path: '/about',
    title: 'A propos de',
    type: 'sub',
    icontype: 'nc-icon nc-layout-11',
    children: [
        {path: 'aboh', title: 'Historique', ab:'ABOH'}
    ]         
},{    

Could you fix it ?

Thanks,

[chelaruc]

Hi @Kris-I Thank you for using our product. You need to add a property to ROUTES. Ex:

export interface RouteInfo {
    path: string;
    title: string;
    type: string;
    icontype: string; 
    collapse?: string, // HERE
    // icon: string;
    children?: ChildrenItems[];
}
export const ROUTES: RouteInfo[] = [{
        path: '/dashboard',
        title: 'Dashboard',
        type: 'link',
        icontype: 'nc-icon nc-bank'
    },{
        path: '/components',
        title: 'Components test', //HERE
        collapse: 'components', //HERE
        type: 'sub',
        icontype: 'nc-icon nc-layout-11',

and in HTML:

<a data-toggle="collapse" href="#{{menuitem.collapse}}" *ngIf="menuitem.type === 'sub'">  //HERE

    <i class="{{menuitem.icontype}}"></i>
    <p>{{menuitem.title}}<b class="caret"></b></p>
</a>

<!--Display the submenu items-->
<div id="{{menuitem.collapse}}" class="collapse" *ngIf="menuitem.type === 'sub'"> //HERE

    <ul class="nav">
        <li routerLinkActive="active" *ngFor="let childitem of menuitem.children">
            <a [routerLink]="[menuitem.path, childitem.path]">
                <span class="sidebar-mini-icon">{{childitem.ab}}</span>
                <span class="sidebar-normal">{{childitem.title}}</span>
            </a>
        </li>
    </ul>
</div>

All the best, Ciprian