Material module imports for the apps

+ Couple fixes

src/@fuse/components/theme-options/theme-options.component.ts

@@ -8,7 +8,6 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
 
 import { navigation } from 'app/navigation/navigation';
 
-
 @Component({
     selector   : 'fuse-theme-options',
     templateUrl: './theme-options.component.html',

src/@fuse/components/theme-options/theme-options.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
+import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
 
 import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
 import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
@@ -17,6 +17,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
 
         FlexLayoutModule,
 
+        MatButtonModule,
         MatDividerModule,
         MatFormFieldModule,
         MatIconModule,

src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts

@@ -12,9 +12,7 @@ import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/f
 export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 {
     matchMediaSubscription: Subscription;
-
     @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
-
     @Input('fuseMatSidenavHelper') id: string;
     @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
 

src/@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { Subscription } from 'rxjs/Subscription';
 
@@ -6,11 +6,10 @@ import PerfectScrollbar from 'perfect-scrollbar';
 
 import { FuseConfigService } from '@fuse/services/config.service';
 
-
 @Directive({
     selector: '[fusePerfectScrollbar]'
 })
-export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
+export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnDestroy
 {
     onConfigChanged: Subscription;
     isDisableCustomScrollbars = false;
@@ -23,14 +22,17 @@ export class FusePerfectScrollbarDirective implements AfterViewInit, OnDestroy
         private fuseConfig: FuseConfigService,
         private platform: Platform
     )
+    {
+    }
+
+    ngOnInit()
     {
         this.onConfigChanged =
-            this.fuseConfig.onConfigChanged
+            this.fuseConfig.onConfigChanged.subscribe(
-                .subscribe(
+                (settings) => {
-                    (settings) => {
+                    this.isDisableCustomScrollbars = !settings.customScrollbars;
-                        this.isDisableCustomScrollbars = !settings.customScrollbars;
+                }
-                    }
+            );
-                );
 
         if ( this.platform.ANDROID || this.platform.IOS )
         {

src/app/app.module.ts

@@ -66,7 +66,7 @@ const appRoutes: Routes = [
         }),
 
         // SharedModule,
-        MaterialModule,
+        // MaterialModule,
 
         // Fuse Main and Shared modules
         FuseModule.forRoot(fuseConfig),

src/app/main/content/apps/academy/academy.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatSidenavModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { FuseAcademyCoursesComponent } from './courses/courses.component';
@@ -30,14 +32,22 @@ const routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations: [
         FuseAcademyCoursesComponent,
         FuseAcademyCourseComponent
     ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatSidenavModule,
+
+        FuseSharedModule
+    ],
     providers   : [
         AcademyCoursesService,
         AcademyCourseService

src/app/main/content/apps/apps.module.ts

@@ -7,13 +7,13 @@ import { FuseSharedModule } from '@fuse/shared.module';
 
 const routes = [
     {
-        path        : 'dashboards/project',
-        loadChildren: './dashboards/project/project.module#FuseProjectDashboardModule'
-    },
-    /*{
         path        : 'dashboards/analytics',
         loadChildren: './dashboards/analytics/analytics.module#FuseAnalyticsDashboardModule'
     },
+    {
+        path        : 'dashboards/project',
+        loadChildren: './dashboards/project/project.module#FuseProjectDashboardModule'
+    },
     {
         path        : 'mail',
         loadChildren: './mail/mail.module#FuseMailModule'
@@ -53,7 +53,7 @@ const routes = [
     {
         path        : 'scrumboard',
         loadChildren: './scrumboard/scrumboard.module#FuseScrumboardModule'
-    }*/
+    }
 ];
 
 @NgModule({

src/app/main/content/apps/calendar/calendar.module.ts

@@ -1,10 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule } from '@angular/material';
+
+import { CalendarModule } from 'angular-calendar';
+import { ColorPickerModule } from 'ngx-color-picker';
+
 import { FuseSharedModule } from '@fuse/shared.module';
+import { FuseConfirmDialogModule } from '@fuse/components';
 
 import { CalendarService } from './calendar.service';
-import { CalendarModule } from 'angular-calendar';
 import { FuseCalendarComponent } from './calendar.component';
 import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component';
 
@@ -20,15 +25,27 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports        : [
-        FuseSharedModule,
-        RouterModule.forChild(routes),
-        CalendarModule.forRoot()
-    ],
     declarations   : [
         FuseCalendarComponent,
         FuseCalendarEventFormDialogComponent
     ],
+    imports        : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatDatepickerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatSlideToggleModule,
+        MatToolbarModule,
+
+        CalendarModule.forRoot(),
+        ColorPickerModule,
+
+        FuseSharedModule,
+        FuseConfirmDialogModule
+    ],
     providers      : [
         CalendarService
     ],

src/app/main/content/apps/chat/chat.module.ts

@@ -1,10 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatCardModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatRadioModule, MatSidenavModule, MatToolbarModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { FuseChatComponent } from './chat.component';
 import { ChatService } from './chat.service';
+import { FuseChatComponent } from './chat.component';
 import { FuseChatViewComponent } from './chat-view/chat-view.component';
 import { FuseChatStartComponent } from './chat-start/chat-start.component';
 import { FuseChatChatsSidenavComponent } from './sidenavs/left/chats/chats.component';
@@ -25,10 +27,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations: [
         FuseChatComponent,
         FuseChatViewComponent,
@@ -39,6 +37,22 @@ const routes: Routes = [
         FuseChatRightSidenavComponent,
         FuseChatContactSidenavComponent
     ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatRadioModule,
+        MatSidenavModule,
+        MatToolbarModule,
+
+        FuseSharedModule
+    ],
     providers   : [
         ChatService
     ]

src/app/main/content/apps/contacts/contacts.module.ts

@@ -1,7 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CdkTableModule } from '@angular/cdk/table';
+
+import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSidenavModule, MatTableModule, MatToolbarModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
+import { FuseConfirmDialogModule } from '@fuse/components';
 
 import { FuseContactsMainSidenavComponent } from './sidenavs/main/main.component';
 import { FuseContactsComponent } from './contacts.component';
@@ -21,10 +25,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports        : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations   : [
         FuseContactsComponent,
         FuseContactsContactListComponent,
@@ -32,6 +32,25 @@ const routes: Routes = [
         FuseContactsMainSidenavComponent,
         FuseContactsContactFormDialogComponent
     ],
+    imports        : [
+        RouterModule.forChild(routes),
+        CdkTableModule,
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDatepickerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatRippleModule,
+        MatSidenavModule,
+        MatTableModule,
+        MatToolbarModule,
+
+        FuseSharedModule,
+        FuseConfirmDialogModule
+    ],
     providers      : [
         ContactsService
     ],

src/app/main/content/apps/dashboards/analytics/analytics.module.ts

@@ -1,8 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTabsModule } from '@angular/material';
+
 import { AgmCoreModule } from '@agm/core';
+import { ChartsModule } from 'ng2-charts';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
@@ -22,18 +25,27 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes),
-        FuseWidgetModule,
-        NgxChartsModule,
-        AgmCoreModule.forRoot({
-            apiKey: 'AIzaSyD81ecsCj4yYpcXSLFcYU97PvRsE_X8Bx8'
-        })
-    ],
     declarations: [
         FuseAnalyticsDashboardComponent
     ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        MatFormFieldModule,
+        MatIconModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatTabsModule,
+
+        AgmCoreModule.forRoot({
+            apiKey: 'AIzaSyD81ecsCj4yYpcXSLFcYU97PvRsE_X8Bx8'
+        }),
+        ChartsModule,
+        NgxChartsModule,
+
+        FuseSharedModule,
+        FuseWidgetModule
+    ],
     providers   : [
         AnalyticsDashboardService
     ]

src/app/main/content/apps/dashboards/project/project.module.ts

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CdkTableModule } from '@angular/cdk/table';
+
+import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatSidenavModule, MatTableModule, MatTabsModule } from '@angular/material';
 
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
@@ -8,7 +11,6 @@ import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
 import { FuseProjectDashboardComponent } from './project.component';
 import { ProjectDashboardService } from './project.service';
-import { MaterialModule } from '@fuse/modules/material.module';
 
 const routes: Routes = [
     {
@@ -21,16 +23,28 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        RouterModule.forChild(routes),
-        FuseSharedModule,
-        MaterialModule,
-        FuseWidgetModule,
-        NgxChartsModule
-    ],
     declarations: [
         FuseProjectDashboardComponent
     ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        CdkTableModule,
+        MatButtonModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatTableModule,
+        MatTabsModule,
+
+        NgxChartsModule,
+
+        FuseSharedModule,
+        FuseWidgetModule
+    ],
     providers   : [
         ProjectDashboardService
     ]

src/app/main/content/apps/e-commerce/e-commerce.module.ts

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CdkTableModule } from '@angular/cdk/table';
+
+import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatSelectModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material';
 
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AgmCoreModule } from '@agm/core';
@@ -64,15 +67,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes),
-        FuseWidgetModule,
-        NgxChartsModule,
-        AgmCoreModule.forRoot({
-            apiKey: 'AIzaSyD81ecsCj4yYpcXSLFcYU97PvRsE_X8Bx8'
-        })
-    ],
     declarations: [
         FuseEcommerceDashboardComponent,
         FuseEcommerceProductsComponent,
@@ -80,6 +74,29 @@ const routes: Routes = [
         FuseEcommerceOrdersComponent,
         FuseEcommerceOrderComponent
     ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        CdkTableModule,
+        MatButtonModule,
+        MatChipsModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatPaginatorModule,
+        MatSelectModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+
+        NgxChartsModule,
+        AgmCoreModule.forRoot({
+            apiKey: 'AIzaSyD81ecsCj4yYpcXSLFcYU97PvRsE_X8Bx8'
+        }),
+
+        FuseSharedModule,
+        FuseWidgetModule,
+    ],
     providers   : [
         EcommerceDashboardService,
         EcommerceProductsService,

src/app/main/content/apps/file-manager/file-manager.module.ts

@@ -1,5 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CdkTableModule } from '@angular/cdk/table';
+
+import { MatButtonModule, MatIconModule, MatSidenavModule, MatSlideToggleModule, MatTableModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
@@ -21,16 +24,24 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports     : [
-        FuseSharedModule,
-        RouterModule.forChild(routes)
-    ],
     declarations: [
         FuseFileManagerComponent,
         FuseFileManagerFileListComponent,
         FuseFileManagerMainSidenavComponent,
         FuseFileManagerDetailsSidenavComponent
     ],
+    imports     : [
+        RouterModule.forChild(routes),
+
+        CdkTableModule,
+        MatButtonModule,
+        MatIconModule,
+        MatSlideToggleModule,
+        MatSidenavModule,
+        MatTableModule,
+
+        FuseSharedModule
+    ],
     providers   : [
         FileManagerService
     ]

src/app/main/content/apps/mail-ngrx/mail.module.ts

@@ -1,8 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatSelectModule, MatSidenavModule, MatToolbarModule } from '@angular/material';
+
+import { TranslateModule } from '@ngx-translate/core';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
+import { MailAppStoreModule } from './store/store.module';
+import * as fromGuards from './store/guards/index';
+
 import { FuseMailNgrxComponent } from './mail.component';
 import { FuseMailNgrxMainSidenavComponent } from './sidenavs/main/main-sidenav.component';
 import { FuseMailNgrxListItemComponent } from './mail-list/mail-list-item/mail-list-item.component';
@@ -10,8 +17,6 @@ import { FuseMailNgrxListComponent } from './mail-list/mail-list.component';
 import { FuseMailNgrxDetailsComponent } from './mail-details/mail-details.component';
 import { MailNgrxService } from './mail.service';
 import { FuseMailNgrxComposeDialogComponent } from './dialogs/compose/compose.component';
-import * as fromGuards from './store/guards/index';
-import { MailAppStoreModule } from './store/store.module';
 
 const routes: Routes = [
     {
@@ -60,8 +65,23 @@ const routes: Routes = [
         FuseMailNgrxComposeDialogComponent
     ],
     imports        : [
-        FuseSharedModule,
         RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatToolbarModule,
+
+        TranslateModule,
+
+        FuseSharedModule,
+
         MailAppStoreModule
     ],
     providers      : [

src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html

@@ -18,21 +18,6 @@
 
                 <div class="time">{{mail.time}}</div>
 
-                <!--<div class="actions" fxLayout="row" fxLayoutAlign="start center" fxHide fxShow.gt-sm>
-
-                    <button mat-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
-                        <mat-icon *ngIf="mail.starred">star</mat-icon>
-                        <mat-icon *ngIf="!mail.starred">star_outline</mat-icon>
-                    </button>
-
-                    <button mat-button class="mat-icon-button" (click)="toggleImportant($event)"
-                            aria-label="Toggle important">
-                        <mat-icon *ngIf="mail.important">label</mat-icon>
-                        <mat-icon *ngIf="!mail.important">label_outline</mat-icon>
-                    </button>
-
-                </div>-->
-
             </div>
 
         </div>

src/app/main/content/apps/mail/mail.module.ts

@@ -1,6 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatSelectModule, MatSidenavModule, MatToolbarModule } from '@angular/material';
+
+import { TranslateModule } from '@ngx-translate/core';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { MailService } from './mail.service';
@@ -70,8 +74,22 @@ const routes: Routes = [
         FuseMailComposeDialogComponent
     ],
     imports        : [
-        FuseSharedModule,
+        RouterModule.forChild(routes),
-        RouterModule.forChild(routes)
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatToolbarModule,
+
+        TranslateModule,
+
+        FuseSharedModule
     ],
     providers      : [
         MailService

src/app/main/content/apps/scrumboard/board/list/card/card.component.html

@@ -17,7 +17,7 @@
     <!-- CARD LABELS -->
     <div *ngIf="card.idLabels.length > 0"
          class="list-card-labels"
-         fxLayout="row" layout-wrap>
+         fxLayout="row" fxLayoutWrap>
 
         <span class="list-card-label"
               [ngClass]="board.labels | getById:labelId:'color'"

src/app/main/content/apps/scrumboard/scrumboard.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatSidenavModule, MatToolbarModule, MatTooltipModule } from '@angular/material';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { BoardResolve, ScrumboardService } from './scrumboard.service';
@@ -16,6 +18,8 @@ import { FuseScrumboardLabelSelectorComponent } from './board/dialogs/card/label
 import { FuseScrumboardEditBoardNameComponent } from './board/edit-board-name/edit-board-name.component';
 import { FuseScrumboardBoardSettingsSidenavComponent } from './board/sidenavs/settings/settings.component';
 import { FuseScrumboardBoardColorSelectorComponent } from './board/sidenavs/settings/board-color-selector/board-color-selector.component';
+import { NgxDnDModule } from '@swimlane/ngx-dnd';
+import { FuseMaterialColorPickerModule } from '@fuse/components';
 
 const routes: Routes = [
     {
@@ -54,8 +58,27 @@ const routes: Routes = [
         FuseScrumboardBoardColorSelectorComponent
     ],
     imports        : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatListModule,
+        MatMenuModule,
+        MatProgressBarModule,
+        MatSidenavModule,
+        MatToolbarModule,
+        MatTooltipModule,
+
+        NgxDnDModule,
+
         FuseSharedModule,
-        RouterModule.forChild(routes)
+        FuseMaterialColorPickerModule
     ],
     providers      : [
         ScrumboardService,

src/app/main/content/apps/todo/todo.module.ts

@@ -1,6 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatSelectModule, MatSidenavModule } from '@angular/material';
+
+import { NgxDnDModule } from '@swimlane/ngx-dnd';
+
 import { FuseSharedModule } from '@fuse/shared.module';
 
 import { TodoService } from './todo.service';
@@ -68,8 +72,21 @@ const routes: Routes = [
         FuseTodoDetailsComponent
     ],
     imports     : [
+        RouterModule.forChild(routes),
+
+        MatButtonModule,
+        MatCheckboxModule,
+        MatDatepickerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+
+        NgxDnDModule,
+
         FuseSharedModule,
-        RouterModule.forChild(routes)
     ],
     providers   : [
         TodoService

src/app/main/navbar/navbar.component.scss

@@ -45,7 +45,10 @@ fuse-sidebar {
 }
 
 fuse-navbar {
-    height: 100%;
+
+    &:not(.top-navbar) {
+        height: 100%;
+    }
 
     .navbar-vertical {
         display: flex;

src/app/main/navbar/navbar.component.ts

@@ -15,7 +15,20 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
 })
 export class FuseNavbarComponent implements OnDestroy
 {
-    @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
+    private fusePerfectScrollbar: FusePerfectScrollbarDirective;
+
+    @ViewChild(FusePerfectScrollbarDirective) set directive(theDirective: FusePerfectScrollbarDirective)
+    {
+        this.fusePerfectScrollbar = theDirective;
+
+        this.navigationServiceWatcher =
+            this.navigationService.onItemCollapseToggled.subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this.fusePerfectScrollbar.update();
+                }, 310);
+            });
+    }
+
     @Input() layout;
     navigation: any;
     navigationServiceWatcher: Subscription;
@@ -31,19 +44,19 @@ export class FuseNavbarComponent implements OnDestroy
 
         // Default layout
         this.layout = 'vertical';
-
-        this.navigationServiceWatcher =
-            this.navigationService.onItemCollapseToggled.subscribe(() => {
-                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
-                    this.fusePerfectScrollbarDirective.update();
-                }, 310);
-            });
     }
 
     ngOnDestroy()
     {
-        clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        if ( this.fusePerfectScrollbarUpdateTimeout )
-        this.navigationServiceWatcher.unsubscribe();
+        {
+            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        }
+
+        if ( this.navigationServiceWatcher )
+        {
+            this.navigationServiceWatcher.unsubscribe();
+        }
     }
 
     toggleSidebarOpened(key)