fuse2...

.floo

@@ -0,0 +1,3 @@
+{
+    "url": "https://floobits.com/srcn/Fuse2"
+}

.flooignore

@@ -0,0 +1,7 @@
+extern
+node_modules
+tmp
+vendor
+.idea/workspace.xml
+.idea/misc.xml
+assets/.gitkeep

package.json

@@ -12,29 +12,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.5",
+    "@angular/animations": "^4.2.6",
     "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.2.5",
+    "@angular/common": "^4.2.6",
-    "@angular/compiler": "^4.2.5",
+    "@angular/compiler": "^4.2.6",
-    "@angular/core": "^4.2.5",
+    "@angular/core": "^4.2.6",
-    "@angular/flex-layout": "^2.0.0-beta.8",
+    "@angular/flex-layout": "^2.0.0-rc.1",
-    "@angular/forms": "^4.2.5",
+    "@angular/forms": "^4.2.6",
-    "@angular/http": "^4.2.5",
+    "@angular/http": "^4.2.6",
     "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.2.5",
+    "@angular/platform-browser": "^4.2.6",
-    "@angular/platform-browser-dynamic": "^4.2.5",
+    "@angular/platform-browser-dynamic": "^4.2.6",
-    "@angular/router": "^4.2.5",
+    "@angular/router": "^4.2.6",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.1.3",
+    "@angular/cli": "^1.2.0",
-    "@angular/compiler-cli": "^4.0.0",
+    "@angular/compiler-cli": "^4.2.6",
-    "@angular/language-service": "^4.0.0",
+    "@angular/language-service": "^4.2.6",
-    "@types/jasmine": "2.5.45",
+    "@types/jasmine": "^2.5.53",
-    "@types/node": "^6.0.79",
+    "@types/jasminewd2": "^2.0.2",
+    "@types/node": "^6.0.80",
     "codelyzer": "~3.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",

src/app/app.component.html

@@ -1,76 +1 @@
-<ng-container *ngIf="layoutSettings.toolbar === 'above'">
-    <fuse-toolbar></fuse-toolbar>
-</ng-container>
-
-<ng-container *ngIf="layoutSettings.navigation === 'left'">
-
-    <md-sidenav-container id="wrapper" class="example-sidenav-fab-container" fxLayout="row" fxfill>
-
-        <md-sidenav #sidenav mode="side" opened="true" fxFlex="256px">
-            <fuse-navigation></fuse-navigation>
-        </md-sidenav>
-
-        <fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
-
-        <div id="content">
-            <router-outlet></router-outlet>
-        </div>
-    </md-sidenav-container>
-
-</ng-container>
-
-<ng-container *ngIf="layoutSettings.navigation === 'right'">
-
-    <md-sidenav-container id="wrapper" class="example-sidenav-fab-container" fxLayout="row" fxfill>
-
-        <fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
-
-        <div id="content">
-            <router-outlet></router-outlet>
-            <button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
-                <md-icon>add</md-icon>
-            </button>
-        </div>
-
-        <md-sidenav #sidenav mode="side" align="end" opened="true" fxFlex="256px">
-            <fuse-navigation></fuse-navigation>
-        </md-sidenav>
-
-    </md-sidenav-container>
-
-</ng-container>
-
-<ng-container *ngIf="layoutSettings.navigation === 'top'">
-
-    <div id="wrapper" class="">
-
-        <div id="nav" class="">
-            <fuse-navigation></fuse-navigation>
-        </div>
-
-        <fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
-
-        <div id="content-wrapper" class="">
-
-            <div id="content">
-                <router-outlet></router-outlet>
-            </div>
-        </div>
-
-    </div>
-</ng-container>
-
-<!--
-<pre>{{layoutSettings | json}}</pre>
-
 <fuse-layout></fuse-layout>
-
-
-<div class="example-container">
-    <h1>Fuse Component</h1>
-    <fuse-fuse name="Sercan" (nameChanged)="onNameChange()"></fuse-fuse>
-    <h1>Muse Component</h1>
-    <input type="text" [(ngModel)]="bgValue">
-    <fuse-muse [bgColor]="bgValue"></fuse-muse>
-</div>
--->

src/app/app.component.spec.ts

@@ -1,32 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
-
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
-  }));
-});

src/app/app.component.ts

@@ -1,33 +1,30 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
-import {LayoutService} from './core/services/layout.service';
 
 @Component({
-    selector   : 'fuse-root',
+    selector   : 'body',
     templateUrl: './app.component.html',
-    styleUrls  : ['./app.component.scss'],
+    styleUrls  : ['./app.component.scss']
-    providers  : [LayoutService]
 })
 export class AppComponent implements OnInit
 {
-    layoutSettings: { toolbar: any, navigation: any };
+    constructor(
-
+        private _renderer: Renderer2,
-    constructor(private layoutService: LayoutService)
+        private _elementRef: ElementRef
+    )
     {
-        this.layoutSettings = layoutService.getSettings();
+    }
+
+    addClass(className: string)
+    {
+        this._renderer.addClass(this._elementRef.nativeElement, className);
+    }
+
+    removeClass(className: string)
+    {
+        this._renderer.removeClass(this._elementRef.nativeElement, className);
     }
 
     ngOnInit()
-    {
-        this.layoutService.settingsChanged
-            .subscribe(
-                (newSettings) =>
-                {
-                    this.layoutSettings = newSettings;
-                }
-            )
-    }
-
-    onNameChange()
     {
 
     }

src/app/app.module.ts

@@ -4,18 +4,28 @@ import 'hammerjs';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AppComponent} from './app.component';
 import {RouterModule, Routes} from '@angular/router';
-import {LayoutComponent} from './core/layout/layout.component';
+import {LayoutComponent} from './core/components/layout/layout.component';
-import {ToolbarComponent} from './toolbar/toolbar.component';
 import {MailModule} from './main/apps/mail/mail.module';
 import {ChatModule} from './main/apps/chat/chat.module';
-import {NavigationModule} from './navigation/navigation.module';
 import {ProjectModule} from './main/apps/dashboards/project/project.module';
-import {SharedModule} from './core/shared.module';
-import {NavigationService} from './navigation/navigation.service';
 import {CardedFullWidthModule} from './main/ui/page-layouts/carded/fullwidth/fullwidth.module';
+import {LayoutService} from './core/services/layout.service';
+import {NavbarComponent} from './core/components/layout/navbar/navbar.component';
+import {ToolbarComponent} from './core/components/layout/toolbar/toolbar.component';
+import {NavigationModule} from './core/components/navigation/navigation.module';
+import {NavigationService} from './core/components/navigation/navigation.service';
+import {SidenavComponent} from './core/components/sidenav/sidenav.component';
+import {FuseMatchMedia} from './core/services/match-media.service';
+import {NavbarToggleDirective} from './core/components/layout/navbar/navbar-toggle.directive';
+import {NavbarService} from './core/components/layout/navbar/navbar.service';
+import { ContentComponent } from './core/components/layout/content/content.component';
+import { SharedModule } from './core/modules/shared.module';
 
 const appRoutes: Routes = [
-    {path: '**', redirectTo: 'apps/dashboards/project'}
+    {
+        path      : '**',
+        redirectTo: 'apps/dashboards/project'
+    }
 ];
 
 @NgModule({
@@ -23,22 +33,23 @@ const appRoutes: Routes = [
         AppComponent,
         LayoutComponent,
         ToolbarComponent,
+        NavbarComponent,
+        SidenavComponent,
+        NavbarToggleDirective,
+        ContentComponent
     ],
     imports     : [
         SharedModule,
         BrowserModule,
         BrowserAnimationsModule,
-        RouterModule.forRoot(
+        RouterModule.forRoot(appRoutes),
-            appRoutes,
-            {enableTracing: true} // <-- debugging purposes only
-        ),
         NavigationModule,
         MailModule,
         ChatModule,
         ProjectModule,
         CardedFullWidthModule
     ],
-    providers   : [NavigationService],
+    providers   : [NavigationService, LayoutService, FuseMatchMedia, NavbarService],
     bootstrap   : [AppComponent]
 })
 export class AppModule

src/app/core/components/layout/content/content.component.html

@@ -1,5 +1 @@
-
 <router-outlet></router-outlet>
-<p>
-    layout works!
-</p>

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

@@ -0,0 +1,3 @@
+:host {
+
+}

src/app/core/components/layout/content/content.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-content',
+    templateUrl: './content.component.html',
+    styleUrls  : ['./content.component.scss']
+})
+export class ContentComponent implements OnInit
+{
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}

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

@@ -0,0 +1,27 @@
+<!-- TOOLBAR: Above -->
+<ng-container *ngIf="layoutSettings.toolbar === 'above'">
+    <fuse-toolbar></fuse-toolbar>
+</ng-container>
+<!-- / TOOLBAR: Above -->
+
+<div id="wrapper">
+
+    <!-- NAVIGATION: Left -->
+    <ng-container *ngIf="layoutSettings.navigation === 'left'">
+
+        <fuse-navbar></fuse-navbar>
+
+        <div class="content-wrapper">
+
+            <ng-container *ngIf="layoutSettings.toolbar === 'below'">
+                <fuse-toolbar></fuse-toolbar>
+            </ng-container>
+
+            <fuse-content></fuse-content>
+
+        </div>
+
+    </ng-container>
+    <!-- / NAVIGATION: Left -->
+
+</div>

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

@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    #wrapper {
+        display: flex;
+
+        .content-wrapper {
+            display: flex;
+            flex: 1;
+
+            fuse-content {
+                display: flex;
+                width: 100%;
+                height: 100%;
+                overflow-x: hidden;
+                overflow-y: auto;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { LayoutService } from '../../services/layout.service';
+
+@Component({
+    selector   : 'fuse-layout',
+    templateUrl: './layout.component.html',
+    styleUrls  : ['./layout.component.scss']
+})
+export class LayoutComponent implements OnInit
+{
+    layoutSettings: { toolbar: any, navigation: any };
+
+    constructor(private layoutService: LayoutService)
+    {
+        this.layoutSettings = layoutService.getSettings();
+    }
+
+    ngOnInit()
+    {
+        this.layoutService.onSettingsChanged
+            .subscribe(
+                (newSettings) =>
+                {
+                    this.layoutSettings = newSettings;
+                }
+            );
+
+    }
+
+}

src/app/core/components/layout/navbar/navbar-toggle.directive.ts

@@ -0,0 +1,27 @@
+import {Directive, HostListener, Input} from '@angular/core';
+import {NavbarService} from './navbar.service';
+import {NavbarComponent} from './navbar.component';
+
+@Directive({
+    selector: '[fuseNavbar]',
+})
+export class NavbarToggleDirective
+{
+    @Input() fuseNavbar: string;
+    navbar: NavbarComponent;
+
+    constructor(navbar: NavbarService)
+    {
+        this.navbar = navbar.getNavBar();
+    }
+
+    @HostListener('click')
+    onMouseEnter()
+    {
+        if ( !this.navbar[this.fuseNavbar] )
+        {
+            return;
+        }
+        this.navbar[this.fuseNavbar]();
+    }
+}

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

@@ -0,0 +1,17 @@
+<div class="navbar-header">
+
+    <div class="logo">
+        <span class="logo-icon">F</span><span class="logo-text">FUSE</span>
+    </div>
+
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="toggleFold" fxHide.xs>
+        <md-icon>menu</md-icon>
+    </button>
+
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="closeBar" fxHide.gt-xs>
+        <md-icon>arrow_back</md-icon>
+    </button>
+
+</div>
+
+<fuse-navigation></fuse-navigation>

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

@@ -0,0 +1,86 @@
+@import "../../../scss/fuse";
+
+:host {
+    display: block;
+    width: 256px;
+    height: 100%;
+    background-color: #FFFFFF;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: 20;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+    transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
+    transform: translateX(0);
+
+    &.folded {
+        position: absolute;
+
+        &:not(.folded-open) {
+            width: 64px !important;
+            min-width: 64px !important;
+            max-width: 64px !important;
+        }
+
+        &.folded-open {
+
+        }
+    }
+
+    &.open {
+        transform: translateX(0) !important;
+    }
+
+    &.close {
+        transform: translateX(-100%) !important;
+    }
+
+    @include media-breakpoint('xs') {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        transform: translateX(-100%);
+    }
+
+    .navbar-header {
+        padding: 0 16px 0 24px;
+        display: flex;
+        align-items: center;
+        height: 64px;
+        justify-content: space-between;
+
+        .logo {
+            display: flex;
+            align-items: center;
+
+            .logo-icon {
+                display: block;
+                background: #039BE5;
+                width: 32px;
+                min-width: 32px;
+                height: 32px;
+                line-height: 32px;
+                text-align: center;
+                font-size: 16px;
+                font-weight: 500;
+                color: #FFF;
+                border-radius: 2px;
+            }
+
+            .logo-text {
+                margin-left: 16px;
+                font-size: 16px;
+            }
+        }
+
+        .toggle-button-navbar {
+            /* border-radius: 50%;
+             position: relative;
+             cursor: pointer;
+             width: 32px;
+             height: 32px;
+             padding: 4px;
+             box-sizing: border-box;*/
+        }
+    }
+}

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

@@ -0,0 +1,125 @@
+import {AfterViewInit, Component, ElementRef, HostBinding, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {AppComponent} from '../../../../app.component';
+import {Subscription} from 'rxjs/Subscription';
+import {MatchMedia, MediaChange, MediaMonitor, ObservableMedia} from '@angular/flex-layout';
+import {FuseMatchMedia} from '../../../services/match-media.service';
+import {NavbarService} from './navbar.service';
+
+@Component({
+    selector   : 'fuse-navbar',
+    templateUrl: './navbar.component.html',
+    styleUrls  : ['./navbar.component.scss']
+})
+export class NavbarComponent 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;
+
+    matchMediaWatcher: Subscription;
+
+    constructor(private elementRef: ElementRef,
+                private bodyEl: AppComponent,
+                private observableMedia: ObservableMedia,
+                private fuseMatchMedia: FuseMatchMedia,
+                private navBarService: NavbarService)
+    {
+        navBarService.setNavBar(this);
+        this.isClosed = false;
+        this.isFoldedActive = false;
+        this.isFoldedOpen = false;
+        this.updateCssClasses();
+
+        this.matchMediaWatcher = this.fuseMatchMedia.onMediaChange.subscribe((mediaStep) =>
+        {
+            console.warn('Media step changed:', mediaStep);
+            if ( mediaStep === 'xs' )
+            {
+                this.closeBar();
+            }
+            else
+            {
+                this.openBar();
+            }
+        });
+    }
+
+    openBar()
+    {
+        console.info('opened');
+        this.isClosed = false;
+        this.updateCssClasses();
+    }
+
+    closeBar()
+    {
+        console.info('closed');
+        this.isClosed = true;
+        this.updateCssClasses();
+    }
+
+    toggleBar()
+    {
+        if ( this.isClosed )
+        {
+            this.openBar();
+        }
+        else
+        {
+            this.closeBar();
+        }
+    }
+
+    toggleFold()
+    {
+        if ( !this.isFoldedActive )
+        {
+            this.isFoldedActive = true;
+            this.bodyEl.addClass('fuse-nav-bar-folded');
+        }
+        else
+        {
+            this.isFoldedActive = false;
+            this.bodyEl.removeClass('fuse-nav-bar-folded');
+        }
+        this.isFoldedOpen = false;
+    }
+
+    @HostListener('mouseenter')
+    onMouseEnter()
+    {
+        this.isFoldedOpen = true;
+    }
+
+    @HostListener('mouseleave')
+    onMouseLeave()
+    {
+        this.isFoldedOpen = false;
+    }
+
+    updateCssClasses()
+    {
+        if ( this.isClosed )
+        {
+            this.bodyEl.addClass('fuse-nav-bar-opened');
+            this.bodyEl.removeClass('fuse-nav-bar-closed');
+        }
+        else
+        {
+            this.bodyEl.addClass('fuse-nav-bar-closed');
+            this.bodyEl.removeClass('fuse-nav-bar-opened');
+        }
+    }
+
+    ngOnInit()
+    {
+
+    }
+
+    ngOnDestroy()
+    {
+        this.matchMediaWatcher.unsubscribe();
+    }
+}

src/app/core/components/layout/navbar/navbar.service.ts

@@ -0,0 +1,21 @@
+import {EventEmitter, Injectable} from '@angular/core';
+
+@Injectable()
+export class NavbarService
+{
+    navBarRef;
+
+    constructor()
+    {
+    }
+
+    setNavBar(ref)
+    {
+        this.navBarRef = ref;
+    }
+
+    getNavBar()
+    {
+        return this.navBarRef;
+    }
+}

src/app/core/components/layout/toolbar/toolbar.component.html

@@ -0,0 +1,9 @@
+<md-toolbar>
+
+    <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
+        <md-icon>menu</md-icon>
+    </button>
+
+    <span>Toolbar</span>
+
+</md-toolbar>

src/app/core/components/layout/toolbar/toolbar.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector   : 'fuse-toolbar',
@@ -16,5 +16,4 @@ export class ToolbarComponent implements OnInit
     ngOnInit()
     {
     }
-
 }

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

@@ -13,7 +13,8 @@
 
     &.open {
 
-        .nav-link {
+        > .nav-link {
+
             .collapse-arrow {
                 transform: rotate(90deg);
             }

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

@@ -1,7 +1,7 @@
 import {Component, HostBinding, Input, OnInit} from '@angular/core';
 import {NavigationService} from '../navigation.service';
 import {NavigationEnd, Router} from '@angular/router';
-import {Animations} from '../../core/animations';
+import {Animations} from '../../../animations';
 
 @Component({
     selector   : 'fuse-nav-collapse',

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

@@ -1,4 +1,4 @@
-@import '../../theme-config';
+@import 'src/app/core/scss/fuse';
 
 #main-navigation {
     margin: 0;
@@ -11,6 +11,7 @@
         color: rgba(0, 0, 0, .54);
         font-weight: 500;
         padding-left: 24px;
+        white-space: nowrap;
     }
 
     .nav-item {
@@ -26,9 +27,11 @@
             background-color: map-get($background, raised-button);
             color: map_get($foreground, text);
             cursor: pointer;
+            user-select: none;
 
             > span {
                 flex: 1;
+                white-space: nowrap;
             }
 
             &:hover {

src/app/core/components/navigation/navigation.module.ts

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {SharedModule} from '../core/shared.module';
+import {SharedModule} from '../../modules/shared.module';
 import {RouterModule, Routes} from '@angular/router';
 import {NavSubheaderComponent} from './nav-subheader/nav-subheader.component';
 import {NavigationComponent} from './navigation.component';

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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,28 @@
+@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

@@ -0,0 +1,45 @@
+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()
+    {
+    }
+
+}

src/app/core/layout/layout.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LayoutComponent } from './layout.component';
-
-describe('LayoutComponent', () => {
-  let component: LayoutComponent;
-  let fixture: ComponentFixture<LayoutComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LayoutComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LayoutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/core/layout/layout.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'fuse-layout',
-  templateUrl: './layout.component.html',
-  styleUrls: ['./layout.component.scss']
-})
-export class LayoutComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/core/scss/core.scss

@@ -0,0 +1,22 @@
+// Fuse
+@import "fuse";
+
+// Theming
+@include mat-core();
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($theme);
+
+// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
+@include mat-base-typography($custom-typography);
+
+// Override typography for a specific Angular Material components.
+@include mat-checkbox-typography($custom-typography);
+
+// Override typography for all Angular Material, including mat-base-typography and all components.
+@include angular-material-typography($custom-typography);
+
+// Partials
+

src/app/core/scss/fuse.scss

@@ -0,0 +1,5 @@
+// Variables
+@import "variables/theme-variables";
+
+// Mixins
+@import "mixins/breakpoints";

src/app/core/scss/mixins/_breakpoints.scss

@@ -0,0 +1,24 @@
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+    xs: 'screen and (max-width: 599px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
+    gt-sm: 'screen and (min-width: 960px)',
+    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
+    gt-md: 'screen and (min-width: 1280px)',
+    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
+    gt-lg: 'screen and (min-width: 1920px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)'
+) !default;
+
+@mixin media-breakpoint($breakpointName) {
+
+    $mediaQuery: map_get($breakpoints, $breakpointName);
+
+    @if ($mediaQuery != null) {
+
+        @media #{$mediaQuery} {
+            @content
+        }
+    }
+}

src/app/core/scss/variables/_theme-variables.scss

@@ -0,0 +1,17 @@
+@import '~@angular/material/theming';
+
+$primary: mat-palette($mat-indigo);
+$accent: mat-palette($mat-blue, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$warn: mat-palette($mat-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$theme: mat-light-theme($primary, $accent, $warn);
+
+$custom-typography: mat-typography-config(
+    $font-family: 'Roboto, "Helvetica Neue", sans-serif'
+);
+
+$background: map-get($theme, background);
+$foreground: map-get($theme, foreground);

src/app/core/services/layout.service.ts

@@ -1,25 +1,26 @@
-import {EventEmitter, Injectable} from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
-import {NavigationStart, Router} from '@angular/router';
+import { NavigationStart, Router } from '@angular/router';
 
 @Injectable()
 export class LayoutService
 {
+    defaultSettings: { toolbar: string, navigation: string };
+    settings: { toolbar: string, navigation: string };
+
+    onSettingsChanged = new EventEmitter<{ toolbar: string, navigation: string }>();
+
     /**
-     * Default Settings
+     * @param router
-     * @type {{navigation: string; toolbar: string}}
      */
-    defaultSettings = {
-        navigation: 'left', // 'right', 'left', 'top', false
-        toolbar   : 'above' // 'above', 'below', false
-    }
-
-    settings;
-
-    settingsChanged = new EventEmitter<{ toolbar: any, navigation: any }>()
-
     constructor(private router: Router)
     {
-        // Asign default settings at the init
+        // Set the default settings
+        this.defaultSettings = {
+            navigation: 'left', // 'right', 'left', 'top', false
+            toolbar   : 'above' // 'above', 'below', false
+        };
+
+        // Assign default settings at the init
         this.settings = {...this.defaultSettings};
 
         // Reset the default settings whenever navigation starts
@@ -29,9 +30,8 @@ export class LayoutService
                 if ( event instanceof NavigationStart )
                 {
                     this.settings = {...this.defaultSettings};
-                    this.settingsChanged.emit(this.settings);
+                    this.onSettingsChanged.emit(this.settings);
                 }
-
             }
         );
     }
@@ -52,7 +52,6 @@ export class LayoutService
     setSettings(newSettings)
     {
         Object.assign(this.settings, newSettings);
-        this.settingsChanged.emit(this.settings);
+        this.onSettingsChanged.emit(this.settings);
-        // console.log('settings changed');
     }
 }

src/app/core/services/match-media.service.ts

@@ -0,0 +1,77 @@
+import { MediaChange, MediaMonitor, ObservableMedia } from '@angular/flex-layout';
+import { Observable } from 'rxjs/Observable';
+import { Observer } from 'rxjs/Observer';
+import { EventEmitter, Injectable } from '@angular/core';
+import 'rxjs/add/operator/filter';
+import { Subscription } from 'rxjs/Subscription';
+
+@Injectable()
+export class FuseMatchMedia
+{
+    activeMediaQuery: string;
+    onMediaChange: Observable<string>;
+    // onMediaChange = new EventEmitter<string>();
+    watcher: Subscription;
+
+    constructor(private observableMedia: ObservableMedia,
+                private mediaMonitor: MediaMonitor)
+    {
+        this.activeMediaQuery = '';
+
+        this.onMediaChange = Observable.create((observer: Observer<string>) =>
+        {
+            this.observableMedia.subscribe((change: MediaChange) =>
+            {
+
+                if ( this.activeMediaQuery !== change.mqAlias )
+                {
+                    this.activeMediaQuery = change.mqAlias;
+                    observer.next(this.activeMediaQuery);
+                    console.warn('From observableMedia:', change.mqAlias);
+
+                }
+            });
+        });
+        /*
+         this.mediaMonitor.observe('xs').subscribe((change: MediaChange) =>
+         {
+         console.warn('From mediaMonitor:', change);
+
+         if ( this.activeMediaQuery !== change.mqAlias )
+         {
+         // this.activeMediaQuery = change.mqAlias;
+
+
+         // this.onMediaChange.emit(this.activeMediaQuery);
+         }
+         });*/
+
+        /* this.observableMedia.subscribe((change: MediaChange) =>
+         {
+         console.warn('From observableMedia:', change.mqAlias);
+
+         if ( this.activeMediaQuery !== change.mqAlias )
+         {
+         this.activeMediaQuery = change.mqAlias;
+
+
+         this.onMediaChange.emit(this.activeMediaQuery);
+         }
+         });*/
+        /*this.observableMedia.asObservable()
+         .filter((change: MediaChange) => change.mqAlias === 'xs')
+         .subscribe(() =>
+         {
+         console.warn('From observableMedia:', this.activeMediaQuery);
+
+         this.onMediaChange.emit(this.activeMediaQuery);
+         });*/
+
+        /*  this.watcher = this.observableMedia.subscribe((change: MediaChange) =>
+         {
+         this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
+         console.warn('From Watcher:', change.mqAlias);
+
+         });*/
+    }
+}

src/app/main/apps/chat/chat.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ChatComponent } from './chat.component';
-
-describe('ChatComponent', () => {
-  let component: ChatComponent;
-  let fixture: ComponentFixture<ChatComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ChatComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ChatComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,5 +1,5 @@
 import {NgModule} from '@angular/core';
-import {SharedModule} from '../../../core/shared.module';
+import {SharedModule} from '../../../core/modules/shared.module';
 import {RouterModule, Routes} from '@angular/router';
 import {ChatComponent} from './chat.component';
 
@@ -7,7 +7,7 @@ const routes: Routes = [
     {
         path: 'apps/chat', component: ChatComponent, children: []
     }
-]
+];
 
 @NgModule({
     imports     : [

src/app/main/apps/dashboards/project/project.component.scss

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    flex: 1;
+}

src/app/main/apps/dashboards/project/project.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ProjectComponent } from './project.component';
-
-describe('ProjectComponent', () => {
-  let component: ProjectComponent;
-  let fixture: ComponentFixture<ProjectComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ProjectComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ProjectComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {ProjectComponent} from './project.component';
-import {SharedModule} from '../../../../core/shared.module';
+import {SharedModule} from '../../../../core/modules/shared.module';
 
 const routes: Routes = [
     {

src/app/main/apps/mail/mail.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MailComponent } from './mail.component';
-
-describe('MailComponent', () => {
-  let component: MailComponent;
-  let fixture: ComponentFixture<MailComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MailComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MailComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,17 +1,23 @@
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
-import {SharedModule} from '../../../core/shared.module';
+import { SharedModule } from '../../../core/modules/shared.module';
-import {RouterModule, Routes} from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
-import {MailComponent} from './mail.component';
+import { MailComponent } from './mail.component';
-import {MainSidenavComponent} from './sidenavs/main/main-sidenav.component';
+import { MainSidenavComponent } from './sidenavs/main/main-sidenav.component';
-import {ClassicViewComponent} from './views/classic/classic-view.component';
+import { ClassicViewComponent } from './views/classic/classic-view.component';
 
 const routes: Routes = [
     {
-        path: 'apps/mail', component: MailComponent, children: [
+        path     : 'apps/mail',
-        {path: '', component: ClassicViewComponent, outlet: 'view'}
+        component: MailComponent,
+        children : [
+            {
+                path     : '',
+                component: ClassicViewComponent,
+                outlet   : 'view'
+            }
         ]
     }
-]
+];
 
 @NgModule({
     imports     : [

src/app/main/apps/mail/sidenavs/main/main-sidenav.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MainSidenavComponent } from './main-sidenav.component';
-
-describe('MainSidenavComponent', () => {
-  let component: MainSidenavComponent;
-  let fixture: ComponentFixture<MainSidenavComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MainSidenavComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MainSidenavComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/main/apps/mail/views/classic/classic-view.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ClassicViewComponent } from './classic-view.component';
-
-describe('ClassicViewComponent', () => {
-  let component: ClassicViewComponent;
-  let fixture: ComponentFixture<ClassicViewComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ClassicViewComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ClassicViewComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ChatComponent } from './fullwidth.component';
-
-describe('ChatComponent', () => {
-  let component: ChatComponent;
-  let fixture: ComponentFixture<ChatComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ChatComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ChatComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.module.ts

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {CardedFullWidthComponent} from './fullwidth.component';
-import {SharedModule} from '../../../../../core/shared.module';
+import {SharedModule} from '../../../../../core/modules/shared.module';
 
 const routes: Routes = [
     {

src/app/toolbar/toolbar.component.html

@@ -1,9 +0,0 @@
-<md-toolbar>
-
-    <a md-mini-fab class="sidenav-toggle-button" (click)="sidenav.toggle()">
-        <md-icon>menu</md-icon>
-    </a>
-
-    <span>Toolbar</span>
-
-</md-toolbar>

src/index.html

@@ -17,7 +17,6 @@
 
     <body class="mat-body">
 
-        <fuse-root></fuse-root>
 
     </body>
 

src/styles.scss

@@ -1,33 +1,19 @@
-@import './theme-config';
+// Import Fuse main library
-// Plus imports for other components in your app.
+@import "app/core/scss/core";
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include angular-material-theme($theme);
-
-// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
-@include mat-base-typography($custom-typography);
-
-// Override typography for a specific Angular Material components.
-@include mat-checkbox-typography($custom-typography);
-
-// Override typography for all Angular Material, including mat-base-typography and all components.
-@include angular-material-typography($custom-typography);
-
-html {
-
-}
 
 html, body {
     margin: 0;
-}
-
-html, body, fuse-root, #wrapper, #content, .mat-sidenav-content {
     width: 100%;
     height: 100%;
+    overflow: hidden;
+}
+
+body {
+
+    &.fuse-nav-bar-folded {
+
+        .content-wrapper {
+            padding-left: 64px;
+        }
+    }
 }

src/theme-config.scss

@@ -1,26 +0,0 @@
-@import '~@angular/material/theming';
-// Plus imports for other components in your app.
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat-core();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue.
-$primary: mat-palette($mat-indigo);
-$accent: mat-palette($mat-blue, A200, A100, A400);
-
-// The warn palette is optional (defaults to red).
-$warn: mat-palette($mat-red);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$theme: mat-light-theme($primary, $accent, $warn);
-
-$custom-typography: mat-typography-config(
-        $font-family: 'Roboto, "Helvetica Neue", sans-serif'
-);
-
-$background: map-get($theme, background);
-$foreground: map-get($theme, foreground);

tslint.json

@@ -26,7 +26,7 @@
         "label-position": true,
         "max-line-length": [
             true,
-      140
+            120
         ],
         "member-access": false,
         "member-ordering": [
@@ -60,19 +60,13 @@
         "no-string-literal": false,
         "no-string-throw": true,
         "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
+        "no-trailing-whitespace": false,
         "no-unnecessary-initializer": true,
         "no-unused-expression": true,
         "no-use-before-declare": true,
         "no-var-keyword": true,
         "object-literal-sort-keys": false,
-    "one-line": [
+        "one-line": false,
-      true,
-      //"check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
         "prefer-const": true,
         "quotemark": [
             true,
@@ -80,6 +74,7 @@
         ],
         "radix": true,
         "semicolon": [
+            true,
             "always"
         ],
         "triple-equals": [