Ufdjrw

Im tried to add My angular project side bar to under the sub menu , but its not working . I used this dashboard template ,
sub menu is not a collapse,
any one know how to fix that issue

Thanks.

This is my code'

sidebar.ts

declare const $: any;
declare interface RouteInfo 
 path: string;
 title: string;
 icon: string;
 class: string;
 children?: any;


 export const ROUTES: RouteInfo[] = [
 path: '/dashboard', title: 'Dashboard', icon: 'home', class: '',
 children: [
 
 path: '/child1', title: 'Child Menu 1', icon: 'home', class: ''
 
 ] ,
 path: '/class', title: 'Class', icon: 'description', class: '' ,
 path: '/student', title: 'Students', icon: 'apps', class: '' ,
 path: '/profile', title: 'Profile', icon: 'person', class: '' ,

];

@Component(
 selector: 'app-sidebar',
 templateUrl: './sidebar.component.html',
 styleUrls: ['./sidebar.component.css']
)
export class SidebarComponent implements OnInit 
 menuItems: any[];

 constructor() 

 ngOnInit() 
 this.menuItems = ROUTES.filter(menuItem => menuItem);
 
 isMobileMenu() 
 if ($(window).width() > 991) 
 return false;
 
 return true;
 ;

sidebar.html

<div class="logo">

 <div class="logo-img">

 </div>


</div>
<div class="sidebar-wrapper" style="margin-top: 2.5rem;">
 <div *ngIf="isMobileMenu()">


 <ul class="nav navbar-nav nav-mobile-menu">
 <li class="nav-item">
 <a class="nav-link" href="#pablo">
 <i class="material-icons">dashboard</i>
 <p>
 <span class="d-lg-none d-md-block">Stats</span>
 </p>
 </a>
 </li>
 <li class="nav-item dropdown">
 <a class="nav-link" href="#pablo" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 <i class="material-icons">notifications</i>
 <span class="notification">5</span>
 <p>
 <span class="d-lg-none d-md-block">Some Actions</span>
 </p>
 </a>
 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Mike John responded to your email</a>
 <a class="dropdown-item" href="#">You have 5 new tasks</a>
 <a class="dropdown-item" href="#">You're now friend with Andrew</a>
 <a class="dropdown-item" href="#">Another Notification</a>
 <a class="dropdown-item" href="#">Another One</a>
 </div>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#pablo">
 <i class="material-icons">person</i>
 <p>
 <span class="d-lg-none d-md-block">Account</span>
 </p>
 </a>
 </li>
 </ul>
 </div>
 <ul class="nav">
 <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="menuItem.class nav-item">
 <a class="nav-link" [routerLink]="[menuItem.path]">
 <i class="material-icons">menuItem.icon</i>
 <p>menuItem.title</p>
 </a>
 <ng-container *ngIf="menuItem.children && menuItem.children.length > 0">
 <ul class="nav">
 <li routerLinkActive="active" *ngFor="let childmenu of menuItem.children" class="menuItem.class nav-item">
 <a class="nav-link" [routerLink]="[childmenu.path]">
 <i class="material-icons">childmenu.icon</i>
 <p>childmenu.title</p>
 </a>
 </li>
 </ul>
 </ng-container>
 </li>
 </ul>
</div>