(FuseNavBar) default folded option added, responsive, right/left sidenav issues fixed.

src/app/main/main.component.html

@@ -10,7 +10,7 @@
 
         <div id="wrapper">
 
-            <fuse-navbar class="md-primary-700-bg" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
+            <fuse-navbar [folded]="true" class="md-primary-700-bg left-navbar" *ngIf="layoutSettings.navigation === 'left'"></fuse-navbar>
 
             <div class="content-wrapper">
 
@@ -30,7 +30,7 @@
 
             </div>
 
-            <fuse-navbar class="md-primary-bg" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
+            <fuse-navbar [folded]="true" class="md-primary-700-bg right-navbar" *ngIf="layoutSettings.navigation === 'right'"></fuse-navbar>
 
         </div>
 

src/app/main/navbar/navbar-toggle.directive.ts

@@ -10,18 +10,20 @@ export class FuseNavbarToggleDirective
     @Input() fuseNavbar: string;
     navbar: FuseNavbarComponent;
 
-    constructor(navbar: FuseNavbarService)
+    constructor(private navbarService: FuseNavbarService)
     {
-        this.navbar = navbar.getNavBar();
     }
 
     @HostListener('click')
     onClick()
     {
+        this.navbar = this.navbarService.getNavBar();
+
         if ( !this.navbar[this.fuseNavbar] )
         {
             return;
         }
+
         this.navbar[this.fuseNavbar]();
     }
 }

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

@@ -5,8 +5,15 @@ body {
     &.fuse-nav-bar-folded {
 
         .content-wrapper {
+
+            &:last-child {
                 padding-left: 64px !important;
             }
+
+            &:first-child {
+                padding-right: 64px !important;
+            }
+        }
     }
 }
 
@@ -27,6 +34,13 @@ fuse-navbar {
     &.folded {
         position: absolute;
 
+        &.left-navbar {
+            left: 0;
+        }
+        &.right-navbar {
+            right: 0;
+        }
+
         &:not(.folded-open) {
             width: 64px;
             min-width: 64px;
@@ -42,21 +56,36 @@ fuse-navbar {
         }
     }
 
-    &.open {
-        transform: translateX(0) !important;
-    }
-
     &.close {
+        &.left-navbar {
             transform: translateX(-100%) !important;
         }
+        &.right-navbar {
+            transform: translateX(100%) !important;
+        }
+        box-shadow: none;
+    }
 
     @include media-breakpoint('xs') {
         position: absolute;
         top: 0;
-        left: 0;
         bottom: 0;
+        &.left-navbar {
+            left: 0;
+        }
+        &.right-navbar {
+            right: 0;
+        }
+
+        &:not(.initialized) {
+            &.left-navbar {
                 transform: translateX(-100%);
             }
+            &.right-navbar {
+                transform: translateX(100%);
+            }
+        }
+    }
 
     .navbar-header {
         padding: 0 16px 0 24px;

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

@@ -1,8 +1,9 @@
-import { Component, HostBinding, HostListener, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, HostBinding, HostListener, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { AppComponent } from '../../app.component';
 import { Subscription } from 'rxjs/Subscription';
 import { FuseMatchMedia } from '../../core/services/match-media.service';
 import { FuseNavbarService } from './navbar.service';
+import { ObservableMedia } from '@angular/flex-layout';
 
 @Component({
     selector     : 'fuse-navbar',
@@ -13,37 +14,68 @@ import { FuseNavbarService } from './navbar.service';
 export class FuseNavbarComponent implements OnInit, OnDestroy
 {
     @HostBinding('class.close') isClosed: boolean;
-    @HostBinding('class.open') isOpened: boolean = !this.isClosed;
-
     @HostBinding('class.folded') isFoldedActive: boolean;
     @HostBinding('class.folded-open') isFoldedOpen: boolean;
+    @HostBinding('class.initialized') initialized: boolean;
+    @Input('folded') foldedByDefault = false;
 
     matchMediaWatcher: Subscription;
 
     constructor(
         private bodyEl: AppComponent,
         private fuseMatchMedia: FuseMatchMedia,
-        private navBarService: FuseNavbarService
+        private navBarService: FuseNavbarService,
+        public media: ObservableMedia
     )
     {
         navBarService.setNavBar(this);
-        this.isClosed = false;
-        this.isFoldedActive = false;
-        this.isFoldedOpen = false;
-        this.updateCssClasses();
 
         this.matchMediaWatcher =
             this.fuseMatchMedia.onMediaChange
                 .subscribe((mediaStep) => {
+                    setTimeout(() => {
+
                         if ( mediaStep === 'xs' )
                         {
                             this.closeBar();
+                            this.deActivateFolded();
                         }
                         else
                         {
                             this.openBar();
                         }
                     });
+                });
+    }
+
+    ngOnInit()
+    {
+        this.isClosed = false;
+        this.isFoldedActive = this.foldedByDefault;
+        this.isFoldedOpen = false;
+        this.initialized = false;
+        this.updateCssClasses();
+
+        setTimeout(() => {
+            this.initialized = true;
+        });
+
+        if ( this.media.isActive('xs') )
+        {
+            this.closeBar();
+            this.deActivateFolded();
+        }
+        else
+        {
+            if ( !this.foldedByDefault )
+            {
+                this.deActivateFolded();
+            }
+            else
+            {
+                this.activateFolded();
+            }
+        }
     }
 
     openBar()
@@ -74,14 +106,25 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
     {
         if ( !this.isFoldedActive )
         {
-            this.isFoldedActive = true;
+            this.activateFolded();
-            this.bodyEl.addClass('fuse-nav-bar-folded');
         }
         else
+        {
+            this.deActivateFolded();
+        }
+    }
+
+    activateFolded()
+    {
+        this.isFoldedActive = true;
+        this.bodyEl.addClass('fuse-nav-bar-folded');
+        this.isFoldedOpen = false;
+    }
+
+    deActivateFolded()
     {
         this.isFoldedActive = false;
         this.bodyEl.removeClass('fuse-nav-bar-folded');
-        }
         this.isFoldedOpen = false;
     }
 
@@ -111,11 +154,6 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
         }
     }
 
-    ngOnInit()
-    {
-
-    }
-
     ngOnDestroy()
     {
         this.matchMediaWatcher.unsubscribe();