CoreUI Sidebar Replacement

_usage.html

<app-sidebar [fixed]="true" [display]="'lg'">
  <app-sidebar2-nav [navItems]="nav">
    <li>Some custom nav content goes here</li>
  </app-sidebar2-nav>
  <app-sidebar-minimizer></app-sidebar-minimizer>
</app-sidebar>

sidebar2-nav-item.component.html

<li *ngIf="isDivider(navItem)" class="nav-divider"></li>
<app-sidebar-nav-title *ngIf="isTitle(navItem)" [title]='navItem'></app-sidebar-nav-title>
<app-sidebar-nav-item *ngIf="!isDivider(navItem)&&!isTitle(navItem)" [item]='navItem'></app-sidebar-nav-item>

sidebar2-nav-item.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {NavItem} from '../services/navigation.service';

@Component({
  selector: 'app-sidebar2-nav-item',
  templateUrl: './sidebar2-nav-item.component.html'
})
export class Sidebar2NavItemComponent implements OnInit {

  @Input()
  navItem: NavItem;

  constructor() {
  }

  ngOnInit() {
  }

  public isDivider(item: NavItem): boolean {
    return item.divider;
  }

  public isTitle(item: NavItem): boolean {
    return item.title;
  }

}

sidebar2-nav.component.html

<ul class="nav">
  <ng-template ngFor let-navitem [ngForOf]="navItems">
    <app-sidebar2-nav-item [navItem]="navitem"></app-sidebar2-nav-item>
  </ng-template>
  <ng-content></ng-content>
</ul>

sidebar2-nav.component.ts

import {Component, HostBinding, Input, OnInit} from '@angular/core';
import {NavItem} from '../services/navigation.service';

@Component({
  selector: 'app-sidebar2-nav',
  templateUrl: './sidebar2-nav.component.html',
})
export class Sidebar2NavComponent implements OnInit {

  @Input() navItems: NavItem[];

  @HostBinding('class.sidebar-nav') true;
  @HostBinding('attr.role') role = 'nav';

  public isDivider(item) {
    return item.divider ? true : false;
  }

  public isTitle(item) {
    return item.title ? true : false;
  }

  constructor() { }

  ngOnInit() {
  }

}