demo/src/app/common/sidebar/sidebar.component.html
<form class="sidebar-search">
<input type="text"
aria-label="Search in docs" name="search"
placeholder="Search..." [(ngModel)]="search.text"/>
<button id="mobile-main-menu" (click)="toggle()">
<img src="assets/images/icons/menu-left.svg" alt="left menu">
</button>
</form>
<div class="mobile-menu">
<div class="bootstrap-version">
<span>Bootstrap: </span>
<button class="btn" [class.selected]="isBs3" (click)="installTheme('bs3')">3</button>
<button class="btn" [class.selected]="!isBs3" (click)="installTheme('bs4')">4</button>
</div>
<div class="sidebar-content" *ngIf="routes && routes.length">
<ul class="sidebar-list">
<li [routerLinkActive]="['active']"
[routerLinkActiveOptions]="{exact: true}">
<a routerLink="/{{routes[1].path}}">{{routes[1].data}}</a>
</li>
</ul>
<h4 class="sidebar-title">Components</h4>
<ul class="sidebar-list">
<li *ngFor="let route of routes | slice:2 | SearchFilter:search.text"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{exact: true}">
<a routerLink="/{{route.path}}">{{route.data[0]}}</a>
</li>
</ul>
</div>
</div>