Sidenav missing styles added, unnecessary sidenav component removed.

src/app/app.module.ts

@@ -8,7 +8,6 @@ import 'hammerjs';
 import { ProjectModule } from './main/apps/dashboards/project/project.module';
 import { FuseLayoutService } from './core/services/layout.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
-import { SidenavComponent } from './core/components/sidenav/sidenav.component';
 import { FuseMatchMedia } from './core/services/match-media.service';
 import { FuseNavbarService } from './core/components/layout/navbar/navbar.service';
 import { SharedModule } from './core/modules/shared.module';
@@ -51,8 +50,7 @@ const appRoutes: Routes = [
 
 @NgModule({
     declarations: [
-        AppComponent,
-        SidenavComponent
+        AppComponent
     ],
     imports     : [
         BrowserModule,

src/app/core/components/layout/navbar/navbar.component.scss

@@ -32,6 +32,10 @@ fuse-navbar {
             width: 64px;
             min-width: 64px;
             max-width: 64px;
+
+            .navbar-header {
+                padding: 0 16px 0 16px;
+            }
         }
 
         &.folded-open {
@@ -62,6 +66,7 @@ fuse-navbar {
         height: 64px;
         min-height: 64px;
         justify-content: space-between;
+        transition: padding 200ms ease;
 
         .logo {
             display: flex;

src/app/core/components/navigation/nav-collapse/nav-collapse.component.scss

@@ -1,5 +1,15 @@
 :host {
 
+    .folded:not(.folded-open) & {
+        .nav-link {
+
+            > span {
+                opacity: 0;
+                transition: opacity 200ms ease;
+            }
+        }
+    }
+
     .nav-link {
         .collapse-arrow {
             transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s;

src/app/core/components/sidenav/sidenav.component.html

@@ -1,16 +0,0 @@
-<p>
-  sidenav works!
-</p>
-
-<div class.md="red-bg" class.lg="green-bg">
-  sidenav works!
-  <br>
-  sidenav works!
-  <br>
-  sidenav works!
-  <br>
-  sidenav works!
-  <br>
-  sidenav works!
-
-</div>

src/app/core/components/sidenav/sidenav.component.scss

@@ -1,28 +0,0 @@
-@import "src/app/core/scss/fuse";
-
-:host {
-    display: block;
-    position: absolute;
-    width: 320px;
-    height: 100%;
-    background: grey;
-    right: 0;
-    top: 0;
-    overflow-y: auto;
-
-    @include media-breakpoint('sm') {
-        background: white;
-    }
-
-    @include media-breakpoint('md') {
-        background: red;
-    }
-
-    @include media-breakpoint('lg') {
-        background: green;
-    }
-
-    @include media-breakpoint('gt-lg') {
-        background: white;
-    }
-}

src/app/core/components/sidenav/sidenav.component.ts

@@ -1,45 +0,0 @@
-import { Component, ElementRef, HostBinding, OnInit } from '@angular/core';
-import { style, animate, sequence, AnimationBuilder, AnimationPlayer } from '@angular/animations';
-import { AppComponent } from '../../../app.component';
-
-@Component({
-    selector   : 'fuse-sidenav',
-    templateUrl: './sidenav.component.html',
-    styleUrls  : ['./sidenav.component.scss']
-})
-export class SidenavComponent implements OnInit
-{
-    constructor(private elementRef: ElementRef,
-                private animationBuilder: AnimationBuilder,
-                private bodyEl: AppComponent)
-    {
-
-    }
-
-    closeBar()
-    {
-        this.animationBuilder
-            .build([
-                style({transform: 'translate3d(0,0,0)'}),
-                animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
-            ])
-            .create(this.elementRef.nativeElement)
-            .play();
-    }
-
-    openBar()
-    {
-        this.animationBuilder
-            .build([
-                style({transform: 'translate3d(100%,0,0)'}),
-                animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
-            ])
-            .create(this.elementRef.nativeElement)
-            .play();
-    }
-
-    ngOnInit()
-    {
-    }
-
-}