;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MuseComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MuseComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/core/muse/muse.component.ts b/src/app/core/muse/muse.component.ts
new file mode 100644
index 00000000..80b75c7e
--- /dev/null
+++ b/src/app/core/muse/muse.component.ts
@@ -0,0 +1,45 @@
+import {Component, ElementRef, HostBinding, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {MuseItem} from './muse-item.model';
+
+@Component({
+ selector : 'fuse-muse',
+ templateUrl: './muse.component.html',
+ styleUrls : ['./muse.component.scss']
+})
+export class MuseComponent implements OnInit
+{
+ items: MuseItem[] = [];
+ elRef: ElementRef;
+ private renderer: Renderer2;
+ @ViewChild('museInput') museInput: ElementRef;
+ @Input() nameChanged;
+ @Input() @HostBinding('style.backgroundColor') bgColor: string;
+
+
+ /* @Input() set bgColor(bgValue)
+ {
+ //this.elRef.nativeElement.style.backgroundColor = bgValue;
+ // this.museInput.nativeElement.style.backgroundColor = bgValue;
+ //this.renderer.setStyle(this.elRef.nativeElement, 'backgroundColor', bgValue);
+ };
+ */
+ constructor(elRef: ElementRef, renderer: Renderer2)
+ {
+ this.elRef = elRef;
+ this.renderer = renderer;
+ }
+
+ onNameChange()
+ {
+ }
+
+ ngOnInit()
+ {
+ console.warn(this.museInput.nativeElement.value);
+ const sercanItem = new MuseItem('sercan');
+ this.items.push(sercanItem);
+ sercanItem.save();
+
+ }
+
+}
diff --git a/src/app/core/services/layout.service.ts b/src/app/core/services/layout.service.ts
new file mode 100644
index 00000000..da9a6460
--- /dev/null
+++ b/src/app/core/services/layout.service.ts
@@ -0,0 +1,58 @@
+import {EventEmitter, Injectable} from '@angular/core';
+import {NavigationStart, Router} from '@angular/router';
+
+@Injectable()
+export class LayoutService
+{
+ /**
+ * Default Settings
+ * @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
+ this.settings = {...this.defaultSettings};
+
+ // Reset the default settings whenever navigation starts
+ router.events.subscribe(
+ (event) =>
+ {
+ if ( event instanceof NavigationStart )
+ {
+ this.settings = {...this.defaultSettings};
+ this.settingsChanged.emit(this.settings);
+ }
+
+ }
+ );
+ }
+
+ /**
+ * Get Settings
+ * @returns {{navigation: any, toolbar: any}}
+ */
+ getSettings()
+ {
+ return this.settings;
+ }
+
+ /**
+ * Set Settings
+ * @param newSettings
+ */
+ setSettings(newSettings)
+ {
+ Object.assign(this.settings, newSettings);
+ this.settingsChanged.emit(this.settings);
+ console.log('settings changed');
+ }
+}
diff --git a/src/app/core/shared.module.ts b/src/app/core/shared.module.ts
new file mode 100644
index 00000000..a8f352a7
--- /dev/null
+++ b/src/app/core/shared.module.ts
@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {MaterialModule} from './material.module';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+
+@NgModule({
+ imports: [
+ FlexLayoutModule,
+ MaterialModule,
+ CommonModule,
+ FormsModule
+ ],
+ exports: [
+ FlexLayoutModule,
+ MaterialModule,
+ CommonModule,
+ FormsModule
+ ],
+})
+export class SharedModule
+{
+
+}
diff --git a/src/app/fuse-component/fuse.component.html b/src/app/fuse-component/fuse.component.html
deleted file mode 100644
index 18fdd129..00000000
--- a/src/app/fuse-component/fuse.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-Normal Buttons
-
-
-
-
-
-
-
-Link Buttons
-
-
- {{name}}
-
-
-
-home
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/app/fuse-component/fuse.component.scss b/src/app/fuse-component/fuse.component.scss
deleted file mode 100644
index fea592cd..00000000
--- a/src/app/fuse-component/fuse.component.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-:host {
- background: gray;
- display: block;
-
- h3 {
- color: red;
- }
-}
diff --git a/src/app/main/apps/chat/chat.component.html b/src/app/main/apps/chat/chat.component.html
new file mode 100644
index 00000000..3a6e1396
--- /dev/null
+++ b/src/app/main/apps/chat/chat.component.html
@@ -0,0 +1,3 @@
+
+ chat works!
+
diff --git a/src/app/main/apps/chat/chat.component.scss b/src/app/main/apps/chat/chat.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/apps/chat/chat.component.spec.ts b/src/app/main/apps/chat/chat.component.spec.ts
new file mode 100644
index 00000000..ebad2744
--- /dev/null
+++ b/src/app/main/apps/chat/chat.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatComponent } from './chat.component';
+
+describe('ChatComponent', () => {
+ let component: ChatComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ChatComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChatComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/main/apps/chat/chat.component.ts b/src/app/main/apps/chat/chat.component.ts
new file mode 100644
index 00000000..dae90173
--- /dev/null
+++ b/src/app/main/apps/chat/chat.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'fuse-chat',
+ templateUrl: './chat.component.html',
+ styleUrls: ['./chat.component.scss']
+})
+export class ChatComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/main/apps/chat/chat.module.ts b/src/app/main/apps/chat/chat.module.ts
new file mode 100644
index 00000000..f17b01eb
--- /dev/null
+++ b/src/app/main/apps/chat/chat.module.ts
@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../../core/shared.module';
+import {RouterModule, Routes} from '@angular/router';
+import {ChatComponent} from './chat.component';
+
+const routes: Routes = [
+ {
+ path: 'apps/chat', component: ChatComponent, children: []
+ }
+]
+
+@NgModule({
+ imports : [
+ SharedModule,
+ RouterModule.forChild(routes)
+ ],
+ declarations: [
+ ChatComponent
+ ]
+})
+export class ChatModule
+{
+}
diff --git a/src/app/main/apps/dashboards/project/project.component.html b/src/app/main/apps/dashboards/project/project.component.html
new file mode 100644
index 00000000..d1e1821e
--- /dev/null
+++ b/src/app/main/apps/dashboards/project/project.component.html
@@ -0,0 +1,3 @@
+
+ project works!
+
diff --git a/src/app/main/apps/dashboards/project/project.component.scss b/src/app/main/apps/dashboards/project/project.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/apps/dashboards/project/project.component.spec.ts b/src/app/main/apps/dashboards/project/project.component.spec.ts
new file mode 100644
index 00000000..1cf2442d
--- /dev/null
+++ b/src/app/main/apps/dashboards/project/project.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectComponent } from './project.component';
+
+describe('ProjectComponent', () => {
+ let component: ProjectComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ProjectComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ProjectComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/main/apps/dashboards/project/project.component.ts b/src/app/main/apps/dashboards/project/project.component.ts
new file mode 100644
index 00000000..fa01ca55
--- /dev/null
+++ b/src/app/main/apps/dashboards/project/project.component.ts
@@ -0,0 +1,19 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+ selector : 'fuse-project',
+ templateUrl: './project.component.html',
+ styleUrls : ['./project.component.scss']
+})
+export class ProjectComponent implements OnInit
+{
+
+ constructor()
+ {
+ }
+
+ ngOnInit()
+ {
+ }
+
+}
diff --git a/src/app/main/apps/dashboards/project/project.module.ts b/src/app/main/apps/dashboards/project/project.module.ts
new file mode 100644
index 00000000..6e67209c
--- /dev/null
+++ b/src/app/main/apps/dashboards/project/project.module.ts
@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {ProjectComponent} from './project.component';
+import {SharedModule} from '../../../../core/shared.module';
+
+const routes: Routes = [
+ {
+ path: 'apps/dashboards/project', component: ProjectComponent, children: []
+ }
+]
+
+@NgModule({
+ imports : [
+ SharedModule,
+ RouterModule.forChild(routes)
+ ],
+ declarations: [
+ ProjectComponent
+ ]
+})
+export class ProjectModule
+{
+}
+
diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html
new file mode 100644
index 00000000..b91ca2f0
--- /dev/null
+++ b/src/app/main/apps/mail/mail.component.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/src/app/main/apps/mail/mail.component.scss b/src/app/main/apps/mail/mail.component.scss
new file mode 100644
index 00000000..50947dc6
--- /dev/null
+++ b/src/app/main/apps/mail/mail.component.scss
@@ -0,0 +1,5 @@
+:host, #mail {
+ width: 100%;
+ height: 100%;
+}
+
diff --git a/src/app/main/apps/mail/mail.component.spec.ts b/src/app/main/apps/mail/mail.component.spec.ts
new file mode 100644
index 00000000..ea936032
--- /dev/null
+++ b/src/app/main/apps/mail/mail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MailComponent } from './mail.component';
+
+describe('MailComponent', () => {
+ let component: MailComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MailComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MailComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/main/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts
new file mode 100644
index 00000000..b0936186
--- /dev/null
+++ b/src/app/main/apps/mail/mail.component.ts
@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {LayoutService} from '../../../core/services/layout.service';
+
+@Component({
+ selector : 'fuse-mail',
+ templateUrl: './mail.component.html',
+ styleUrls : ['./mail.component.scss']
+})
+export class MailComponent implements OnInit
+{
+
+ constructor(private layoutService: LayoutService)
+ {
+ this.layoutService.setSettings({
+ toolbar : 'below',
+ navigation: 'left'
+ });
+ }
+
+ ngOnInit()
+ {
+
+ }
+
+}
diff --git a/src/app/main/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts
new file mode 100644
index 00000000..fa27dce2
--- /dev/null
+++ b/src/app/main/apps/mail/mail.module.ts
@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../../core/shared.module';
+import {RouterModule, Routes} from '@angular/router';
+import {MailComponent} from './mail.component';
+import {MainSidenavComponent} from './sidenavs/main/main-sidenav.component';
+import {ClassicViewComponent} from './views/classic/classic-view.component';
+
+const routes: Routes = [
+ {
+ path: 'apps/mail', component: MailComponent, children: [
+ {path: '', component: ClassicViewComponent, outlet: 'view'}
+ ]
+ }
+]
+
+@NgModule({
+ imports : [
+ SharedModule,
+ RouterModule.forChild(routes)
+ ],
+ declarations: [
+ MailComponent,
+ MainSidenavComponent,
+ ClassicViewComponent
+ ]
+})
+export class MailModule
+{
+}
diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
new file mode 100644
index 00000000..993bbb85
--- /dev/null
+++ b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html
@@ -0,0 +1,3 @@
+
+ main sidenav
+
diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.spec.ts b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.spec.ts
new file mode 100644
index 00000000..80b06442
--- /dev/null
+++ b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainSidenavComponent } from './main-sidenav.component';
+
+describe('MainSidenavComponent', () => {
+ let component: MainSidenavComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MainSidenavComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MainSidenavComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts
new file mode 100644
index 00000000..3e85a097
--- /dev/null
+++ b/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts
@@ -0,0 +1,17 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+ selector : 'fuse-mail-main-sidenav',
+ templateUrl: './main-sidenav.component.html',
+ styleUrls : ['./main-sidenav.component.scss']
+})
+export class MainSidenavComponent implements OnInit
+{
+ constructor()
+ {
+ }
+
+ ngOnInit()
+ {
+ }
+}
diff --git a/src/app/main/apps/mail/views/classic/classic-view.component.html b/src/app/main/apps/mail/views/classic/classic-view.component.html
new file mode 100644
index 00000000..2313184b
--- /dev/null
+++ b/src/app/main/apps/mail/views/classic/classic-view.component.html
@@ -0,0 +1,3 @@
+
+ classic view
+
diff --git a/src/app/main/apps/mail/views/classic/classic-view.component.scss b/src/app/main/apps/mail/views/classic/classic-view.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/main/apps/mail/views/classic/classic-view.component.spec.ts b/src/app/main/apps/mail/views/classic/classic-view.component.spec.ts
new file mode 100644
index 00000000..076a26b5
--- /dev/null
+++ b/src/app/main/apps/mail/views/classic/classic-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClassicViewComponent } from './classic-view.component';
+
+describe('ClassicViewComponent', () => {
+ let component: ClassicViewComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ClassicViewComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ClassicViewComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/main/apps/mail/views/classic/classic-view.component.ts b/src/app/main/apps/mail/views/classic/classic-view.component.ts
new file mode 100644
index 00000000..b84fa2ab
--- /dev/null
+++ b/src/app/main/apps/mail/views/classic/classic-view.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'fuse-mail-classic-view',
+ templateUrl: './classic-view.component.html',
+ styleUrls: ['./classic-view.component.scss']
+})
+export class ClassicViewComponent implements OnInit {
+
+ constructor() {}
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/material.module.ts b/src/app/material.module.ts
deleted file mode 100644
index 026fd869..00000000
--- a/src/app/material.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {MdButtonModule, MdCheckboxModule} from '@angular/material';
-
-@NgModule({
- imports: [
- MdButtonModule,
- MdCheckboxModule
- ],
- exports: [
- MdButtonModule,
- MdCheckboxModule
- ],
-})
-export class MaterialModule
-{
-
-}
\ No newline at end of file
diff --git a/src/app/navigation/nav-collapse/nav-collapse.component.html b/src/app/navigation/nav-collapse/nav-collapse.component.html
new file mode 100644
index 00000000..c52cbf7a
--- /dev/null
+++ b/src/app/navigation/nav-collapse/nav-collapse.component.html
@@ -0,0 +1,10 @@
+
+ {{item.icon}}
+ {{item.title}}
+
+
+
+
+
+
+
diff --git a/src/app/navigation/nav-collapse/nav-collapse.component.scss b/src/app/navigation/nav-collapse/nav-collapse.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/navigation/nav-collapse/nav-collapse.component.spec.ts b/src/app/navigation/nav-collapse/nav-collapse.component.spec.ts
new file mode 100644
index 00000000..32efb8fe
--- /dev/null
+++ b/src/app/navigation/nav-collapse/nav-collapse.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavCollapseComponent } from './nav-collapse.component';
+
+describe('NavCollapseComponent', () => {
+ let component: NavCollapseComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NavCollapseComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavCollapseComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/navigation/nav-collapse/nav-collapse.component.ts b/src/app/navigation/nav-collapse/nav-collapse.component.ts
new file mode 100644
index 00000000..e648a4ba
--- /dev/null
+++ b/src/app/navigation/nav-collapse/nav-collapse.component.ts
@@ -0,0 +1,21 @@
+import {Component, HostBinding, Input, OnInit} from '@angular/core';
+
+@Component({
+ selector : 'fuse-nav-collapse',
+ templateUrl: './nav-collapse.component.html',
+ styleUrls : ['./nav-collapse.component.scss']
+})
+export class NavCollapseComponent implements OnInit
+{
+ @HostBinding('class') classes = 'nav-collapse nav-item';
+ @Input() item: any;
+
+ constructor()
+ {
+ }
+
+ ngOnInit()
+ {
+ }
+
+}
diff --git a/src/app/navigation/nav-item/nav-item.component.html b/src/app/navigation/nav-item/nav-item.component.html
new file mode 100644
index 00000000..dacbdb6a
--- /dev/null
+++ b/src/app/navigation/nav-item/nav-item.component.html
@@ -0,0 +1,4 @@
+
+ {{item.icon}}
+ {{item.title}}
+
diff --git a/src/app/navigation/nav-item/nav-item.component.scss b/src/app/navigation/nav-item/nav-item.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/navigation/nav-item/nav-item.component.spec.ts b/src/app/navigation/nav-item/nav-item.component.spec.ts
new file mode 100644
index 00000000..94b2cabf
--- /dev/null
+++ b/src/app/navigation/nav-item/nav-item.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavItemComponent } from './nav-item.component';
+
+describe('NavItemComponent', () => {
+ let component: NavItemComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NavItemComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/navigation/nav-item/nav-item.component.ts b/src/app/navigation/nav-item/nav-item.component.ts
new file mode 100644
index 00000000..4f6b2ba7
--- /dev/null
+++ b/src/app/navigation/nav-item/nav-item.component.ts
@@ -0,0 +1,21 @@
+import {Component, HostBinding, Input, OnInit, ViewEncapsulation} from '@angular/core';
+
+@Component({
+ selector : 'fuse-nav-item',
+ templateUrl: './nav-item.component.html',
+ styleUrls : ['./nav-item.component.scss']
+})
+export class NavItemComponent implements OnInit
+{
+ @HostBinding('class') classes = 'nav-item';
+ @Input() item: any;
+
+ constructor()
+ {
+ }
+
+ ngOnInit()
+ {
+ }
+
+}
diff --git a/src/app/navigation/nav-subheader/nav-subheader.component.html b/src/app/navigation/nav-subheader/nav-subheader.component.html
new file mode 100644
index 00000000..23015e7e
--- /dev/null
+++ b/src/app/navigation/nav-subheader/nav-subheader.component.html
@@ -0,0 +1 @@
+{{ item.title }}
diff --git a/src/app/navigation/nav-subheader/nav-subheader.component.scss b/src/app/navigation/nav-subheader/nav-subheader.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/navigation/nav-subheader/nav-subheader.component.spec.ts b/src/app/navigation/nav-subheader/nav-subheader.component.spec.ts
new file mode 100644
index 00000000..8c937474
--- /dev/null
+++ b/src/app/navigation/nav-subheader/nav-subheader.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavSubheaderComponent } from './nav-subheader.component';
+
+describe('NavSubheaderComponent', () => {
+ let component: NavSubheaderComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NavSubheaderComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavSubheaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should be created', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/navigation/nav-subheader/nav-subheader.component.ts b/src/app/navigation/nav-subheader/nav-subheader.component.ts
new file mode 100644
index 00000000..ba3a650e
--- /dev/null
+++ b/src/app/navigation/nav-subheader/nav-subheader.component.ts
@@ -0,0 +1,21 @@
+import {Component, HostBinding, Input, OnInit} from '@angular/core';
+
+@Component({
+ selector : 'fuse-nav-subheader',
+ templateUrl: './nav-subheader.component.html',
+ styleUrls : ['./nav-subheader.component.scss']
+})
+export class NavSubheaderComponent implements OnInit
+{
+ @HostBinding('class') classes = 'nav-subheader';
+ @Input() item: any;
+
+ constructor()
+ {
+ }
+
+ ngOnInit()
+ {
+ }
+
+}
diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html
new file mode 100644
index 00000000..0dc924e8
--- /dev/null
+++ b/src/app/navigation/navigation.component.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/navigation/navigation.component.scss b/src/app/navigation/navigation.component.scss
new file mode 100644
index 00000000..bea2eee1
--- /dev/null
+++ b/src/app/navigation/navigation.component.scss
@@ -0,0 +1,82 @@
+@import '../../theme-config';
+
+#main-navigation {
+ margin: 0;
+ padding: 0;
+
+ .nav-subheader {
+ display: flex;
+ align-items: center;
+ height: 56px;
+ color: rgba(0, 0, 0, .54);
+ font-weight: 500;
+ padding-left: 24px;
+ }
+
+ .nav-item {
+
+ .nav-link {
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ height: 48px;
+ padding: 0 24px;
+ position: relative;
+ overflow: hidden;
+ background-color: map-get($background, raised-button);
+ color: map_get($foreground, text);
+
+ &:hover {
+ background-color: map-get($background, hover);
+ }
+
+ .mat-ripple-element {
+ background-color: map-get($background, hover);
+ }
+
+ &.active {
+ background-color: mat-color($accent);
+
+ .mat-ripple-element {
+ background-color: mat-color($accent, default-contrast, 0.1);
+ }
+
+ &, .mat-icon {
+ color: mat-color($accent, default-contrast);
+ }
+ }
+
+ .mat-icon {
+ font-size: 16px;
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ color: map_get($mat-light-theme-foreground, icon);;
+ margin-right: 16px;
+ }
+ }
+
+ &.nav-collapse {
+
+ > .children {
+
+ > .nav-item {
+
+ > .nav-link {
+ padding-left: 56px;
+ }
+
+ > .children {
+
+ > .nav-item {
+
+ > .nav-link {
+ padding-left: 72px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts
new file mode 100644
index 00000000..fe953112
--- /dev/null
+++ b/src/app/navigation/navigation.component.ts
@@ -0,0 +1,25 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {FuseNavigation} from './navigation.model';
+
+@Component({
+ selector : 'fuse-navigation',
+ templateUrl: './navigation.component.html',
+ styleUrls : ['./navigation.component.scss'],
+ providers : [FuseNavigation],
+ encapsulation: ViewEncapsulation.None
+
+})
+export class NavigationComponent implements OnInit
+{
+ navigation: object[];
+
+ constructor(fuseNavigation: FuseNavigation)
+ {
+ this.navigation = fuseNavigation.array;
+ }
+
+ ngOnInit()
+ {
+ }
+
+}
diff --git a/src/app/navigation/navigation.model.ts b/src/app/navigation/navigation.model.ts
new file mode 100644
index 00000000..7968d8d0
--- /dev/null
+++ b/src/app/navigation/navigation.model.ts
@@ -0,0 +1,415 @@
+export class FuseNavigation
+{
+ array = [
+ {
+ 'title': 'APPS',
+ 'type' : 'subheader'
+ },
+ {
+ 'title' : 'Dashboards',
+ 'type' : 'nav-collapse',
+ 'icon' : 'dashboard',
+ 'url' : 'apps/dashboards',
+ 'children': [
+ {
+ 'type' : 'nav-item',
+ 'title': 'Project',
+ 'url' : 'apps/dashboards/project'
+ },
+ {
+ 'type' : 'nav-item',
+ 'title': 'Server',
+ 'url' : 'apps-dashboards-server'
+ }
+ ]
+ },
+ {
+ 'title': 'Calendar',
+ 'type' : 'nav-item',
+ 'icon' : 'today',
+ 'url' : 'apps-calendar'
+ },
+ {
+ 'title' : 'Ecommerce',
+ 'type' : 'nav-collapse',
+ 'icon' : 'shopping_cart',
+ 'url' : 'apps-e-commerce-',
+ 'children': [
+ {
+ 'title': 'Products',
+ 'type' : 'nav-item',
+ 'url' : 'apps-e-commerce-products'
+ },
+ {
+ 'title': 'Product',
+ 'type' : 'nav-item',
+ 'url' : 'apps-e-commerce-product'
+ },
+ {
+ 'title': 'Orders',
+ 'type' : 'nav-item',
+ 'url' : 'apps-e-commerce-orders'
+ }
+ ]
+ },
+ {
+ 'title': 'Mail',
+ 'type' : 'nav-item',
+ 'icon' : 'email',
+ 'url' : 'apps/mail'
+ },
+ {
+ 'title': 'Chat',
+ 'type' : 'nav-item',
+ 'icon' : 'chat',
+ 'url' : 'apps/chat'
+ },
+ {
+ 'title': 'File Manager',
+ 'type' : 'nav-item',
+ 'icon' : 'folder',
+ 'url' : 'apps-file-manager'
+ },
+ {
+ 'title': 'Contacts',
+ 'type' : 'nav-item',
+ 'icon' : 'account_box',
+ 'url' : 'apps-contacts'
+ },
+ {
+ 'title': 'To-Do',
+ 'type' : 'nav-item',
+ 'icon' : 'checkbox_cricle',
+ 'url' : 'apps-todo'
+ },
+ {
+ 'title': 'PAGES',
+ 'type' : 'subheader'
+ },
+ {
+ 'title' : 'Authentication',
+ 'type' : 'nav-collapse',
+ 'icon' : 'lock',
+ 'url' : 'pages-auth-',
+ 'children': [
+ {
+ 'title': 'Login',
+ 'type' : 'nav-item',
+ 'url' : 'pages-auth-login'
+ },
+ {
+ 'title': 'Login v2',
+ 'type' : 'nav-item',
+ 'url' : 'pages-auth-login-v2'
+ },
+ {
+ 'title': 'Register',
+ 'type' : 'nav-item',
+ 'url' : 'pages-auth-register'
+ },
+ {
+ 'title': 'Register v2',
+ 'type' : 'nav-item',
+ 'url' : 'pages-auth-register-v2'
+ },
+ {
+ 'title': 'Forgot Password',
+ 'type' : 'nav-item',
+ 'url' : 'pages-auth-forgot-password'
+ },
+ {
+ 'title': 'Reset Password',
+ 'type' : 'nav-item',
+ 'url' : 'pages-auth-reset-password'
+ },
+ {
+ 'title': 'Lock Screen',
+ 'type' : 'nav-item',
+ 'url' : 'pages-auth-lock-screen'
+ }
+ ]
+ },
+ {
+ 'title': 'Coming Soon',
+ 'type' : 'nav-item',
+ 'icon' : 'alarm',
+ 'url' : 'pages-coming-soon'
+ },
+ {
+ 'title' : 'Errors',
+ 'type' : 'nav-collapse',
+ 'icon' : 'error',
+ 'url' : 'pages-errors-',
+ 'children': [
+ {
+ 'title': '404',
+ 'type' : 'nav-item',
+ 'url' : 'pages-errors-404'
+ },
+ {
+ 'title': '500',
+ 'type' : 'nav-item',
+ 'url' : 'pages-errors-500'
+ }
+ ]
+ },
+ {
+ 'title': 'Maintenance',
+ 'type' : 'nav-item',
+ 'icon' : 'build',
+ 'url' : 'pages-maintenance'
+ },
+ {
+ 'title': 'Profile',
+ 'type' : 'nav-item',
+ 'icon' : 'account',
+ 'url' : 'pages-profile'
+ },
+ {
+ 'title': 'Search',
+ 'type' : 'nav-item',
+ 'icon' : 'search',
+ 'url' : 'pages-search'
+ },
+ {
+ 'title': 'USER INTERFACE',
+ 'type' : 'subheader'
+ },
+ {
+ 'title' : 'Elements',
+ 'type' : 'nav-collapse',
+ 'icon' : 'layers',
+ 'url' : 'user-interface-elements-',
+ 'children': [
+ {
+ 'title': 'Alerts',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-alerts'
+ },
+ {
+ 'title': 'Badges',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-badges'
+ },
+ {
+ 'title': 'Breadcrumb',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-breadcrumb'
+ },
+ {
+ 'title': 'Buttons',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-buttons'
+ },
+ {
+ 'title': 'Button Group',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-button-group'
+ },
+ {
+ 'title': 'Cards',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-cards'
+ },
+ {
+ 'title': 'Dropdowns',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-dropdowns'
+ },
+ {
+ 'title': 'Forms',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-forms'
+ },
+ {
+ 'title': 'Input Group',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-input-group'
+ },
+ {
+ 'title': 'Jumbotron',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-jumbotron'
+ },
+ {
+ 'title': 'List Group',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-list-group'
+ },
+ {
+ 'title': 'Navs',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-navs'
+ },
+ {
+ 'title': 'Navbar',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-navbar'
+ },
+ {
+ 'title': 'Pagination',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-pagination'
+ },
+ {
+ 'title': 'Progress',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-elements-progress'
+ }
+ ]
+ },
+ {
+ 'title' : 'Tables',
+ 'type' : 'nav-collapse',
+ 'icon' : 'border_all',
+ 'url' : 'user-interface-tables-',
+ 'children': [
+ {
+ 'title': 'Simple Table',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-tables-simple-table'
+ },
+ {
+ 'title': 'Data Table',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-tables-data-table'
+ }
+ ]
+ },
+ {
+ 'title' : 'Page Layouts',
+ 'type' : 'nav-collapse',
+ 'icon' : 'view_quilt',
+ 'url' : 'user-interface-page-layouts-',
+ 'children': [
+ {
+ 'title' : 'Carded',
+ 'type' : 'nav-collapse',
+ 'url' : 'user-interface-page-layouts-carded-',
+ 'children': [
+ {
+ 'title': 'Full Width',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-carded-full-width'
+ },
+ {
+ 'title': 'Left Sidebar',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-carded-left-sidebar'
+ },
+ {
+ 'title': 'Right Sidebar',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-carded-right-sidebar'
+ }
+ ]
+ },
+ {
+ 'title' : 'Simple',
+ 'type' : 'nav-collapse',
+ 'url' : 'user-interface-page-layouts-simple-',
+ 'children': [
+ {
+ 'title': 'Full Width',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-simple-full-width'
+ },
+ {
+ 'title': 'Left Sidebar',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-simple-left-sidebar'
+ },
+ {
+ 'title': 'Left Sidebar Inner',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-simple-left-sidebar-inner'
+ },
+ {
+ 'title': 'Left Sidebar Floating',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-simple-left-sidebar-floating'
+ },
+ {
+ 'title': 'Right Sidebar',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-simple-right-sidebar'
+ },
+ {
+ 'title': 'Right Sidebar Inner',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-simple-right-sidebar-inner'
+ },
+ {
+ 'title': 'Right Sidebar Floating',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-simple-right-sidebar-floating'
+ },
+ {
+ 'title': 'Tabbed',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-simple-tabbed'
+ }
+ ]
+ },
+ {
+ 'title': 'Blank',
+ 'type' : 'nav-item',
+ 'url' : 'user-interface-page-layouts-blank'
+ }
+ ]
+ },
+ {
+ 'title': 'Colors',
+ 'type' : 'nav-item',
+ 'icon' : 'color_lens',
+ 'url' : 'user-interface-colors'
+ },
+ {
+ 'title': 'COMPONENTS',
+ 'type' : 'subheader'
+ },
+ {
+ 'title' : 'Charts',
+ 'type' : 'nav-collapse',
+ 'url' : 'components-charts-',
+ 'icon' : 'poll',
+ 'children': [
+ {
+ 'title': 'nvD3',
+ 'type' : 'nav-item',
+ 'url' : 'components-charts-nvd3'
+ }
+ ]
+ },
+ {
+ 'title': 'Collapse',
+ 'type' : 'nav-item',
+ 'icon' : 'add_box',
+ 'url' : 'components-collapse'
+ },
+ {
+ 'title': 'Modal',
+ 'type' : 'nav-item',
+ 'icon' : 'picture_in_picture',
+ 'url' : 'components-modal'
+ },
+ {
+ 'title': 'Popovers',
+ 'type' : 'nav-item',
+ 'icon' : 'chat_buble',
+ 'url' : 'components-popovers'
+ },
+ {
+ 'title': 'Snackbar',
+ 'type' : 'nav-item',
+ 'icon' : 'call_to_action',
+ 'url' : 'components-snackbar'
+ },
+ {
+ 'title': 'Tooltips',
+ 'type' : 'nav-item',
+ 'icon' : 'live_help',
+ 'url' : 'components-tooltips'
+ }
+ ];
+}
diff --git a/src/app/navigation/navigation.module.ts b/src/app/navigation/navigation.module.ts
new file mode 100644
index 00000000..35b6cc56
--- /dev/null
+++ b/src/app/navigation/navigation.module.ts
@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../core/shared.module';
+import {RouterModule, Routes} from '@angular/router';
+import {NavSubheaderComponent} from './nav-subheader/nav-subheader.component';
+import {NavigationComponent} from './navigation.component';
+import {NavItemComponent} from './nav-item/nav-item.component';
+import {NavCollapseComponent} from './nav-collapse/nav-collapse.component';
+
+
+@NgModule({
+ imports : [
+ SharedModule,
+ RouterModule
+ ],
+ exports : [
+ NavigationComponent
+ ],
+ declarations: [
+ NavigationComponent,
+ NavSubheaderComponent,
+ NavItemComponent,
+ NavCollapseComponent
+ ]
+})
+export class NavigationModule
+{
+}
diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html
new file mode 100644
index 00000000..ebb864f9
--- /dev/null
+++ b/src/app/toolbar/toolbar.component.html
@@ -0,0 +1,9 @@
+
+
+
+ menu
+
+
+ Toolbar
+
+
diff --git a/src/app/toolbar/toolbar.component.scss b/src/app/toolbar/toolbar.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/toolbar/toolbar.component.ts b/src/app/toolbar/toolbar.component.ts
new file mode 100644
index 00000000..38c2aecb
--- /dev/null
+++ b/src/app/toolbar/toolbar.component.ts
@@ -0,0 +1,20 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+ selector : 'fuse-toolbar',
+ templateUrl: './toolbar.component.html',
+ styleUrls : ['./toolbar.component.scss']
+})
+export class ToolbarComponent implements OnInit
+{
+ @Input() sidenav;
+
+ constructor()
+ {
+ }
+
+ ngOnInit()
+ {
+ }
+
+}
diff --git a/src/index.html b/src/index.html
index 8a22b9bd..df360ae9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,15 +1,24 @@
-
-
- Fuse2
-
-
-
-
-
-
-
-
+
+
+
+ Fuse2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles.scss b/src/styles.scss
index 272baa5d..a969c3c4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,6 +1,33 @@
-/* You can add global styles to this file, and also import other style files */
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import './theme-config';
+// Plus imports for other components in your app.
-h3 {
- font-weight: bold;
-}
\ No newline at end of file
+// 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%;
+}
diff --git a/src/theme-config.scss b/src/theme-config.scss
new file mode 100644
index 00000000..b27e1b32
--- /dev/null
+++ b/src/theme-config.scss
@@ -0,0 +1,26 @@
+@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);