(Theme Options) component added.

src/app/core/components/theme-options/theme-options.component.html

@@ -0,0 +1,40 @@
+<button #openButton *ngIf="!isOpened" md-icon-button class="open-button md-primary-bg mat-elevation-z2" (click)="openBar()">
+    <md-icon>settings</md-icon>
+</button>
+
+<div #panel class="theme-options-panel md-white-bg mat-elevation-z2 p-16">
+
+    <button md-icon-button class="close-button" (click)="closeBar()">
+        <md-icon>close</md-icon>
+    </button>
+
+    <md-list>
+        <h3 md-subheader>Navigation:</h3>
+        <md-list-item>
+            <md-radio-group [(ngModel)]="layoutSettings.navigation" (ngModelChange)="onLayoutSettingsChanged()">
+                <md-radio-button class="mr-8" value="left">Left</md-radio-button>
+                <md-radio-button class="mr-8" value="right">Right</md-radio-button>
+                <md-radio-button class="mr-8" value="none">None</md-radio-button>
+            </md-radio-group>
+        </md-list-item>
+
+        <h3 md-subheader>Toolbar:</h3>
+        <md-list-item>
+            <md-radio-group [(ngModel)]="layoutSettings.toolbar" (ngModelChange)="onLayoutSettingsChanged()">
+                <md-radio-button class="mr-8" value="below">Below</md-radio-button>
+                <md-radio-button class="mr-8" value="above">Above</md-radio-button>
+                <md-radio-button class="mr-8" value="none">None</md-radio-button>
+            </md-radio-group>
+        </md-list-item>
+
+        <h3 md-subheader>Footer:</h3>
+        <md-list-item>
+            <md-radio-group [(ngModel)]="layoutSettings.footer" (ngModelChange)="onLayoutSettingsChanged()">
+                <md-radio-button class="mr-8" value="below">Below</md-radio-button>
+                <md-radio-button class="mr-8" value="above">Above</md-radio-button>
+                <md-radio-button class="mr-8" value="none">None</md-radio-button>
+            </md-radio-group>
+        </md-list-item>
+
+    </md-list>
+</div>

src/app/core/components/theme-options/theme-options.component.scss

@@ -0,0 +1,46 @@
+@import "src/app/core/scss/fuse";
+
+:host {
+    position: fixed;
+    display: block;
+    right: 0;
+    top: 160px;
+
+    .theme-options-panel {
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 320px;
+        height: 480px;
+        transform: translate3d(100%, 0, 0);
+        z-index: 999;
+
+        .close-button {
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+    }
+
+    .open-button {
+        position: absolute;
+        top: 0;
+        left: -48px;
+        z-index: 998;
+        width: 48px;
+        height: 48px;
+        line-height: 48px;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 0;
+        margin: 0;
+        pointer-events: auto;
+        opacity: .75;
+        z-index: 998;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+}

src/app/core/components/theme-options/theme-options.component.ts

@@ -0,0 +1,70 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { style, animate, sequence, AnimationBuilder, AnimationPlayer } from '@angular/animations';
+import { Subscription } from 'rxjs/Subscription';
+import { FuseLayoutService } from '../../services/layout.service';
+
+@Component({
+    selector   : 'fuse-theme-options',
+    templateUrl: './theme-options.component.html',
+    styleUrls  : ['./theme-options.component.scss']
+})
+export class FuseThemeOptionsComponent implements OnInit, OnDestroy
+{
+    @ViewChild('openButton') openButton;
+    @ViewChild('panel') panel;
+
+    public player: AnimationPlayer;
+
+    onSettingsChanged: Subscription;
+    layoutSettings: { navigation: string, toolbar: string, footer: string };
+
+    constructor(
+        private animationBuilder: AnimationBuilder,
+        private layoutService: FuseLayoutService
+    )
+    {
+        this.onSettingsChanged =
+            this.layoutService.onSettingsChanged
+                .subscribe(
+                    (newSettings) => {
+                        this.layoutSettings = newSettings;
+                    }
+                );
+    }
+
+    closeBar()
+    {
+        this.player =
+            this.animationBuilder
+                .build([
+                    style({transform: 'translate3d(0,0,0)'}),
+                    animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
+                ]).create(this.panel.nativeElement);
+        this.player.play();
+    }
+
+    openBar()
+    {
+        this.player =
+            this.animationBuilder
+                .build([
+                    style({transform: 'translate3d(100%,0,0)'}),
+                    animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
+                ]).create(this.panel.nativeElement);
+        this.player.play();
+    }
+
+    ngOnInit()
+    {
+    }
+
+    ngOnDestroy()
+    {
+        this.onSettingsChanged.unsubscribe();
+    }
+
+    onLayoutSettingsChanged()
+    {
+        this.layoutService.onSettingsChanged.next(this.layoutSettings);
+    }
+}

src/app/main/main.component.html

@@ -49,3 +49,5 @@
     <!-- / QUICK PANEL -->
 
 </md-sidenav-container>
+
+<fuse-theme-options></fuse-theme-options>

src/app/main/main.module.ts

@@ -9,6 +9,7 @@ import { FuseToolbarComponent } from './toolbar/toolbar.component';
 import { FuseNavigationModule } from '../core/components/navigation/navigation.module';
 import { FuseNavbarToggleDirective } from './navbar/navbar-toggle.directive';
 import { QuickPanelComponent } from './quick-panel/quick-panel.component';
+import { FuseThemeOptionsComponent } from '../core/components/theme-options/theme-options.component';
 
 @NgModule({
     declarations: [
@@ -18,6 +19,7 @@ import { QuickPanelComponent } from './quick-panel/quick-panel.component';
         FuseNavbarComponent,
         FuseToolbarComponent,
         FuseNavbarToggleDirective,
+        FuseThemeOptionsComponent,
         QuickPanelComponent
     ],
     imports     : [