purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed how navigation data passed into the fuse-navigation

Browse Source 
+ Added hidden property to the nav items
+ Updated fuse-navigation component docs
+ Updated other components that uses fuse-navigation service
+ Updated various packages including Angular and Angular Material
This commit is contained in:
Sercan Yemen 2018-02-20 11:05:07 +03:00
parent 51bd636ba6
commit 3dfb79423a
22 changed files with 1826 additions and 3882 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3291
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
package.json
View File

@ -1,6 +1,6 @@
{
"name": "fuse2",
"version": "1.3.7",
"name": "fuse",
"version": "5.2.5",
"license": "https://themeforest.net/licenses/terms/regular",
"scripts": {
"ng": "ng",
@ -19,19 +19,19 @@
"private": true,
"dependencies": {
"@agm/core": "1.0.0-beta.2",
"@angular/animations": "5.2.4",
"@angular/cdk": "5.2.0",
"@angular/common": "5.2.4",
"@angular/compiler": "5.2.4",
"@angular/core": "5.2.4",
"@angular/animations": "5.2.5",
"@angular/cdk": "5.2.1",
"@angular/common": "5.2.5",
"@angular/compiler": "5.2.5",
"@angular/core": "5.2.5",
"@angular/flex-layout": "2.0.0-beta.12",
"@angular/forms": "5.2.4",
"@angular/http": "5.2.4",
"@angular/material": "5.2.0",
"@angular/material-moment-adapter": "5.2.0",
"@angular/platform-browser": "5.2.4",
"@angular/platform-browser-dynamic": "5.2.4",
"@angular/router": "5.2.4",
"@angular/forms": "5.2.5",
"@angular/http": "5.2.5",
"@angular/material": "5.2.1",
"@angular/material-moment-adapter": "5.2.1",
"@angular/platform-browser": "5.2.5",
"@angular/platform-browser-dynamic": "5.2.5",
"@angular/router": "5.2.5",
"@ngrx/effects": "5.0.0",
"@ngrx/router-store": "5.0.0",
"@ngrx/store": "5.0.0",
@ -41,7 +41,7 @@
"@swimlane/ngx-datatable": "11.1.7",
"@swimlane/ngx-dnd": "3.1.0",
"@types/prismjs": "1.9.0",
"angular-calendar": "0.23.3",
"angular-calendar": "0.23.6",
"angular-in-memory-web-api": "0.5.3",
"chart.js": "2.7.1",
"classlist.js": "1.1.20150312",
@ -52,7 +52,7 @@
"moment": "2.20.1",
"ng2-charts": "1.6.0",
"ngrx-store-freeze": "0.2.1",
"ngx-color-picker": "5.3.1",
"ngx-color-picker": "5.3.2",
"ngx-cookie-service": "1.0.10",
"perfect-scrollbar": "1.3.0",
"prismjs": "1.11.0",
@ -61,13 +61,13 @@
"zone.js": "0.8.20"
},
"devDependencies": {
"@angular/cli": "1.6.8",
"@angular/compiler-cli": "5.2.4",
"@angular/language-service": "5.2.4",
"@angular/cli": "1.7.0",
"@angular/compiler-cli": "5.2.5",
"@angular/language-service": "5.2.5",
"@angularclass/hmr": "2.1.3",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "2.0.3",
"@types/node": "6.0.98",
"@types/node": "6.0.101",
"codelyzer": "4.1.0",
"jasmine-core": "2.8.0",
"jasmine-spec-reporter": "4.2.1",

4
src/@fuse/components/navigation/navigation.component.html
View File

@ -4,7 +4,7 @@
<!-- Vertical Navigation Layout -->
<ng-container *ngIf="layout === 'vertical'">
<ng-container *ngFor="let item of navigationModel">
<ng-container *ngFor="let item of navigation">
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
@ -18,7 +18,7 @@
<!-- Horizontal Navigation Layout -->
<ng-container *ngIf="layout === 'horizontal'">
<ng-container *ngFor="let item of navigationModel">
<ng-container *ngFor="let item of navigation">
<fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
<fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>

8
src/@fuse/components/navigation/navigation.component.scss
View File

@ -1,6 +1,12 @@
@import 'src/@fuse/scss/fuse';
#main-navigation {
fuse-navigation {
display: flex;
flex: 1 0 auto;
#main-navigation {
margin: 0;
padding: 0;
width: 100%;
}
}

24
src/@fuse/components/navigation/navigation.component.ts
View File

@ -1,6 +1,4 @@
import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
import { FuseNavigationService } from './navigation.service';
import { Subscription } from 'rxjs/Subscription';
import { Component, Input, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'fuse-navigation',
@ -8,25 +6,13 @@ import { Subscription } from 'rxjs/Subscription';
styleUrls : ['./navigation.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseNavigationComponent implements OnDestroy
export class FuseNavigationComponent
{
navigationModel: any[];
navigationModelChangeSubscription: Subscription;
@Input() layout = 'vertical';
@Input() navigation: any;
@Input('layout') layout = 'vertical';
constructor(private fuseNavigationService: FuseNavigationService)
constructor()
{
this.navigationModelChangeSubscription =
this.fuseNavigationService.onNavigationModelChange
.subscribe((navigationModel) => {
this.navigationModel = navigationModel;
});
}
ngOnDestroy()
{
this.navigationModelChangeSubscription.unsubscribe();
}
}

5
src/@fuse/components/navigation/navigation.model.ts
View File

@ -1,5 +0,0 @@
export interface FuseNavigationModelInterface
{
model: any[];
}

1
src/@fuse/components/navigation/navigation.module.ts
View File

@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../../modules/shared.module';
import { RouterModule } from '@angular/router';
import { FuseNavigationComponent } from './navigation.component';
import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';

164
src/@fuse/components/navigation/navigation.service.ts
View File

@ -1,177 +1,27 @@
import { EventEmitter, Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { FuseNavigationModelInterface } from './navigation.model';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class FuseNavigationService
{
onNavCollapseToggle = new EventEmitter<any>();
onNavCollapseToggled = new EventEmitter<any>();
onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
navigationModel: FuseNavigationModelInterface;
flatNavigation: any[] = [];
onItemCollapsed: Subject<any> = new Subject;
onItemCollapseToggled: Subject<any> = new Subject;
constructor()
{
}
/**
* Get navigation model
*
* Get flattened navigation array
* @param navigation
* @returns {any[]}
*/
getNavigationModel()
getFlatNavigation(navigation)
{
return this.navigationModel.model;
}
/**
* Set the navigation model
*
* @param model
*/
setNavigationModel(model)
{
this.navigationModel = model;
this.onNavigationModelChange.next(this.navigationModel.model);
}
/**
* Add new navigation item
* to the given location
*/
addNavigationItem(location, item)
{
// Parse the location
const locationArr = location.split('.');
if ( locationArr.length === 0 )
{
return;
}
// Find the navigation item
const navItem = this.findNavigationItemById(locationArr);
// Act according to the item type
switch ( navItem.type )
{
case 'item':
// Create a children array
navItem.children = [];
// Push the item
navItem.children.push(item);
// Change the item type to collapsable
navItem.type = 'collapse';
break;
case 'collapse':
// Push the item
navItem.children.push(item);
break;
case 'group':
// Push the item
navItem.children.push(item);
break;
default:
break;
}
}
/**
* Get navigation item from
* given location
*
* @param location
*/
getNavigationItem(location)
{
// Parse the location
const locationArr = location.split('.');
if ( locationArr.length === 0 )
{
return;
}
// Find and return the navigation item
return this.findNavigationItemById(locationArr);
}
/**
* Find navigation item by location
*
* @param location
* @param navigation
*/
findNavigationItemById(location, navigation?)
{
if ( !navigation )
{
navigation = this.navigationModel.model;
}
// Iterate through the given navigation
for ( const navItem of navigation )
{
// If the nav item id equals the first location...
if ( navItem.id === location[0] )
{
// If there is more location to look at...
if ( location.length > 1 )
{
// Remove the first item of the location
location.splice(0, 1);
// Go nested...
return this.findNavigationItemById(location, navItem.children);
}
// Otherwise just return the nav item
else
{
return navItem;
}
}
}
}
/**
* Get flattened navigation array
* @param navigationItems
* @returns {any[]}
*/
getFlatNavigation(navigationItems?)
{
// If navigation items not provided,
// that means we are running the function
// for the first time...
if ( !navigationItems )
{
// Reset the flat navigation
this.flatNavigation = [];
// Get the entire navigation model
navigationItems = this.navigationModel.model;
}
for ( const navItem of navigationItems )
{
if ( navItem.type === 'subheader' )
{
continue;
}
if ( navItem.type === 'item' )
{
this.flatNavigation.push({

12
src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
View File

@ -1,4 +1,6 @@
<a class="nav-link" matRipple (click)="toggleOpen($event)">
<ng-container *ngIf="!item.hidden">
<a class="nav-link" matRipple (click)="toggleOpen($event)">
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
@ -6,12 +8,14 @@
{{item.badge.title}}
</span>
<mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
</a>
</a>
<div class="children" [@slideInOut]="isOpen">
<div class="children" [@slideInOut]="isOpen">
<ng-container *ngFor="let item of item.children">
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
</ng-container>
</div>
</div>
</ng-container>

10
src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
View File

@ -40,7 +40,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
);
// Listen for collapsing of any navigation item
this.navigationService.onNavCollapseToggled
this.navigationService.onItemCollapsed
.subscribe(
(clickedItem) => {
if ( clickedItem && clickedItem.children )
@ -95,8 +95,8 @@ export class FuseNavVerticalCollapseComponent implements OnInit
this.isOpen = !this.isOpen;
// Navigation collapse toggled...
this.navigationService.onNavCollapseToggled.emit(this.item);
this.navigationService.onNavCollapseToggle.emit();
this.navigationService.onItemCollapsed.next(this.item);
this.navigationService.onItemCollapseToggled.next();
}
/**
@ -110,7 +110,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
}
this.isOpen = true;
this.navigationService.onNavCollapseToggle.emit();
this.navigationService.onItemCollapseToggled.next();
}
/**
@ -124,7 +124,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
}
this.isOpen = false;
this.navigationService.onNavCollapseToggle.emit();
this.navigationService.onItemCollapseToggled.next();
}
/**

14
src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html
View File

@ -1,11 +1,15 @@
<div class="group-title">
<span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
</div>
<ng-container *ngIf="!item.hidden">
<div class="group-items">
<div class="group-title">
<span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
</div>
<div class="group-items">
<ng-container *ngFor="let item of item.children">
<fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
<fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
<fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
</ng-container>
</div>
</div>
</ng-container>

12
src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html
View File

@ -1,4 +1,6 @@
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
<ng-container *ngIf="!item.hidden">
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
@ -6,13 +8,15 @@
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</a>
</a>
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [translate]="item.badge.translate"
[ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
{{item.badge.title}}
</span>
</span>
</span>
</ng-container>

4
src/@fuse/components/shortcuts/shortcuts.component.ts
View File

@ -6,6 +6,8 @@ import { FuseMatchMedia } from '../../services/match-media.service';
import { FuseConfigService } from '../../services/config.service';
import { CookieService } from 'ngx-cookie-service';
import { navigation } from 'app/navigation/navigation';
@Component({
selector : 'fuse-shortcuts',
templateUrl: './shortcuts.component.html',
@ -34,7 +36,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
private cookieService: CookieService
)
{
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
this.onConfigChanged =
this.fuseConfig.onConfigChanged

5
src/@fuse/components/theme-options/theme-options.component.ts
View File

@ -4,6 +4,7 @@ import { Subscription } from 'rxjs/Subscription';
import { FuseConfigService } from '../../services/config.service';
import { fuseAnimations } from '../../animations/index';
import { FuseNavigationService } from '../navigation/navigation.service';
import { navigation } from 'app/navigation/navigation';
@Component({
selector : 'fuse-theme-options',
@ -43,9 +44,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// Get the nav model and add customize nav item
// that opens the bar programmatically
const navModel = this.navigationService.getNavigationModel();
const nav: any = navigation;
navModel.push({
nav.push({
'id' : 'custom-function',
'title' : 'Custom Function',
'type' : 'group',

4
src/app/app.component.ts
View File

@ -5,7 +5,6 @@ import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseNavigationModel } from './navigation/navigation.model';
import { locale as navigationEnglish } from './navigation/i18n/en';
import { locale as navigationTurkish } from './navigation/i18n/tr';
@ -32,9 +31,6 @@ export class AppComponent
// Use a language
this.translate.use('en');
// Set the navigation model
this.fuseNavigationService.setNavigationModel(new FuseNavigationModel());
// Set the navigation translations
this.translationLoader.loadTranslations(navigationEnglish, navigationTurkish);
}

76
src/app/main/content/components/navigation/navigation.component.html
View File

@ -26,27 +26,44 @@
<p class="py-8">
<fuse-highlight lang="html">
<textarea #source>
<fuse-navigation></fuse-navigation>
<fuse-navigation [navigation]="navigation" [layout]="'vertical'"></fuse-navigation>
</textarea>
</fuse-highlight>
</p>
</div>
<div class="my-48">
<h2>Model</h2>
<h2>[navigation]</h2>
<p class="py-8">
<code>&lt;fuse-navigation&gt;&lt;/fuse-navigation&gt;</code> uses a service and a model file to populate
the entire navigation. It supports three different navigation items; <b>Subheader</b>,
<code>&lt;fuse-navigation&gt;&lt;/fuse-navigation&gt;</code> uses a json file to populate
the entire navigation. It supports three different navigation items; <b>Group</b>,
<b>Collapsable</b> and <b>Item</b>. These items can be mixed and matched to create unique and complex
navigation layouts.
</p>
<p class="py-8">
Navigation model can be found in <code>src/app/navigation</code> folder along with its translation
files. Navigation model and its translation files are set in <b>app.component.ts</b> file. Check that
Navigation data can be found in <code>src/app/navigation</code> folder along with its translation
files. Navigation data and its translation files are set in <b>app.component.ts</b> file. Check that
file for more detailed usage example.
</p>
</div>
<div class="my-48">
<h2>[layout]</h2>
<p class="py-8">
There are two different layout options for the component; <code>vertical</code> and
<code>horizontal</code>. You can set the layout using the <code>[layout]</code> input.
</p>
</div>
<div class="my-48">
<h2>Updating the navigation</h2>
<p class="py-8">
Direct modifications on the navigation data will be reflected to the component. So you can modify the
json data, or even create it from scratch using your backend and the changes will reflected to the
component immediately.
</p>
</div>
<div class="my-48">
<h3>Grouping</h3>
<p class="py-8">
@ -118,7 +135,7 @@
</p>
<p>
Edit the <code>main.component.html</code> file and look for the <code>[folded]</code> attribute on
<code>fuse-navbar-vertical</code> components.
<code>fuse-sidebar</code> components.
</p>
<p>
Assigning <code>true</code> to that attribute will make the vertical navigation folded by default.
@ -130,6 +147,34 @@
<h2>Examples</h2>
<h4>Show / Hide certain navigation items</h4>
<p class="py-8">
<fuse-highlight lang="typescript">
<textarea #source>
hidden = false;
showHideCalendarMenuItem()
{
// Get the calendar item from the navigation
const calendarNavItem = this.navigation[0].children[1];
// Toggle the visibility
this.hidden = !this.hidden;
calendarNavItem.hidden = this.hidden;
}
</textarea>
</fuse-highlight>
</p>
<div class="mt-24 mb-64">
<button mat-button mat-raised-button color="accent" (click)="showHideCalendarMenuItem()">
Show / Hide calendar menu item
</button>
</div>
<h4>Update navigation item on-the-fly</h4>
<p class="py-8">
@ -138,7 +183,7 @@
updateMailBadge()
{
// Get the mail nav item
const mailNavItem = this.navigationService.getNavigationItem('applications.mail');
const mailNavItem = this.navigation[0].children[4];
// Update the badge title
mailNavItem.badge.title = 35;
@ -170,8 +215,17 @@
url : '/apps/calendar'
};
// Add the new nav item
this.navigationService.addNavigationItem('applications.calendar', newNavItem);
// Get the calendar item from the navigation
const calendarNavItem = this.navigation[0].children[1];
// Make the calendar navigation item collapsable
calendarNavItem.type = 'collapse';
// Create an empty children array
calendarNavItem.children = [];
// Push the new children
calendarNavItem.children.push(newNavItem);
}
</textarea>
</fuse-highlight>
@ -203,7 +257,7 @@
};
// Get the applications nav item
const applicationsNavItem = this.navigationService.getNavigationItem('applications');
const applicationsNavItem = this.navigation[0];
// Add the new nav item at the beginning of the applications
applicationsNavItem.children.unshift(newNavItem);

36
src/app/main/content/components/navigation/navigation.component.ts
View File

@ -1,6 +1,6 @@
import { Component } from '@angular/core';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { navigation } from 'app/navigation/navigation';
@Component({
selector : 'fuse-navigation-docs',
@ -9,15 +9,28 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
})
export class FuseNavigationDocsComponent
{
constructor(private navigationService: FuseNavigationService)
{
navigation: any;
hidden = false;
constructor()
{
this.navigation = navigation;
}
showHideCalendarMenuItem()
{
// Get the calendar item from the navigation
const calendarNavItem = this.navigation[0].children[1];
// Toggle the visibility
this.hidden = !this.hidden;
calendarNavItem.hidden = this.hidden;
}
updateMailBadge()
{
// Get the mail nav item
const mailNavItem = this.navigationService.getNavigationItem('applications.mail');
const mailNavItem = this.navigation[0].children[4];
// Update the badge title
mailNavItem.badge.title = 35;
@ -33,8 +46,17 @@ export class FuseNavigationDocsComponent
url : '/apps/calendar'
};
// Add the new nav item
this.navigationService.addNavigationItem('applications.calendar', newNavItem);
// Get the calendar item from the navigation
const calendarNavItem = this.navigation[0].children[1];
// Make the calendar navigation item collapsable
calendarNavItem.type = 'collapse';
// Create an empty children array
calendarNavItem.children = [];
// Push the new children
calendarNavItem.children.push(newNavItem);
}
addNavItemWithCustomFunction()
@ -50,7 +72,7 @@ export class FuseNavigationDocsComponent
};
// Get the applications nav item
const applicationsNavItem = this.navigationService.getNavigationItem('applications');
const applicationsNavItem = this.navigation[0];
// Add the new nav item at the beginning of the applications
applicationsNavItem.children.unshift(newNavItem);

4
src/app/main/navbar/navbar.component.html
View File

@ -24,7 +24,7 @@
</div>
<div class="navbar-content" fusePerfectScrollbar>
<fuse-navigation layout="vertical"></fuse-navigation>
<fuse-navigation [navigation]="navigation" layout="vertical"></fuse-navigation>
</div>
</div>
@ -34,7 +34,7 @@
<ng-container *ngIf="layout == 'horizontal'">
<div class="navbar-horizontal">
<fuse-navigation layout="horizontal"></fuse-navigation>
<fuse-navigation [navigation]="navigation" layout="horizontal"></fuse-navigation>
</div>
</ng-container>

14
src/app/main/navbar/navbar.component.scss
View File

@ -44,15 +44,22 @@ fuse-sidebar {
}
}
.navbar-vertical {
fuse-navbar {
height: 100%;
.navbar-vertical {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.navbar-header {
padding: 0 16px 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
min-height: 64px;
justify-content: space-between;
padding: 0 16px 0 24px;
transition: padding 200ms ease;
background-color: rgba(255, 255, 255, .05);
@include mat-elevation(1);
@ -78,6 +85,7 @@ fuse-sidebar {
.navbar-content {
flex: 1;
}
}
}
.top-navbar + #wrapper {

34
src/app/main/navbar/navbar.component.ts
View File

@ -1,21 +1,49 @@
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { navigation } from 'app/navigation/navigation';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
@Component({
selector : 'fuse-navbar',
templateUrl : './navbar.component.html',
styleUrls : ['./navbar.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseNavbarComponent
export class FuseNavbarComponent implements OnDestroy
{
@ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
@Input() layout;
navigation: any;
navigationServiceWatcher: Subscription;
fusePerfectScrollbarUpdateTimeout;
constructor(private sidebarService: FuseSidebarService)
constructor(
private sidebarService: FuseSidebarService,
private navigationService: FuseNavigationService
)
{
// Navigation data
this.navigation = navigation;
// Default layout
this.layout = 'vertical';
this.navigationServiceWatcher =
this.navigationService.onItemCollapseToggled.subscribe(() => {
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
this.fusePerfectScrollbarDirective.update();
}, 310);
});
}
ngOnDestroy()
{
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
this.navigationServiceWatcher.unsubscribe();
}
toggleSidebarOpened(key)

913
src/app/navigation/navigation.model.ts
View File

@ -1,913 +0,0 @@
import { FuseNavigationModelInterface } from '@fuse/components/navigation/navigation.model';
export class FuseNavigationModel implements FuseNavigationModelInterface
{
public model: any[];
constructor()
{
this.model = [
{
'id' : 'applications',
'title' : 'Applications',
'translate': 'NAV.APPLICATIONS',
'type' : 'group',
'icon' : 'apps',
'children' : [
{
'id' : 'dashboards',
'title' : 'Dashboards',
'translate': 'NAV.DASHBOARDS',
'type' : 'collapse',
'icon' : 'dashboard',
'children' : [
{
'id' : 'analytics',
'title': 'Analytics',
'type' : 'item',
'url' : '/apps/dashboards/analytics'
},
{
'id' : 'project',
'title': 'Project',
'type' : 'item',
'url' : '/apps/dashboards/project'
},
]
},
{
'id' : 'calendar',
'title' : 'Calendar',
'translate': 'NAV.CALENDAR',
'type' : 'item',
'icon' : 'today',
'url' : '/apps/calendar'
},
{
'id' : 'e-commerce',
'title' : 'E-Commerce',
'translate': 'NAV.ECOMMERCE',
'type' : 'collapse',
'icon' : 'shopping_cart',
'children' : [
{
'id' : 'dashboard',
'title': 'Dashboard',
'type' : 'item',
'url' : '/apps/e-commerce/dashboard'
},
{
'id' : 'products',
'title' : 'Products',
'type' : 'item',
'url' : '/apps/e-commerce/products',
'exactMatch': true
},
{
'id' : 'productDetail',
'title' : 'Product Detail',
'type' : 'item',
'url' : '/apps/e-commerce/products/1/printed-dress',
'exactMatch': true
},
{
'id' : 'orders',
'title' : 'Orders',
'type' : 'item',
'url' : '/apps/e-commerce/orders',
'exactMatch': true
},
{
'id' : 'orderDetail',
'title' : 'Order Detail',
'type' : 'item',
'url' : '/apps/e-commerce/orders/1',
'exactMatch': true
}
]
},
{
'id' : 'academy',
'title' : 'Academy',
'translate': 'NAV.ACADEMY',
'type' : 'item',
'icon' : 'school',
'url' : '/apps/academy'
},
{
'id' : 'mail',
'title' : 'Mail',
'translate': 'NAV.MAIL.TITLE',
'type' : 'item',
'icon' : 'email',
'url' : '/apps/mail',
'badge' : {
'title' : 25,
'translate': 'NAV.MAIL.BADGE',
'bg' : '#F44336',
'fg' : '#FFFFFF'
}
},
{
'id' : 'mail-ngrx',
'title' : 'Mail Ngrx',
'translate': 'NAV.MAIL_NGRX.TITLE',
'type' : 'item',
'icon' : 'email',
'url' : '/apps/mail-ngrx',
'badge' : {
'title' : 13,
'translate': 'NAV.MAIL_NGRX.BADGE',
'bg' : '#EC0C8E',
'fg' : '#FFFFFF'
}
},
{
'id' : 'chat',
'title' : 'Chat',
'translate': 'NAV.CHAT',
'type' : 'item',
'icon' : 'chat',
'url' : '/apps/chat',
'badge' : {
'title': 13,
'bg' : '#09d261',
'fg' : '#FFFFFF'
}
},
{
'id' : 'file-manager',
'title' : 'File Manager',
'translate': 'NAV.FILE_MANAGER',
'type' : 'item',
'icon' : 'folder',
'url' : '/apps/file-manager'
},
{
'id' : 'contacts',
'title' : 'Contacts',
'translate': 'NAV.CONTACTS',
'type' : 'item',
'icon' : 'account_box',
'url' : '/apps/contacts'
},
{
'id' : 'to-do',
'title' : 'To-Do',
'translate': 'NAV.TODO',
'type' : 'item',
'icon' : 'check_box',
'url' : '/apps/todo',
'badge' : {
'title': 3,
'bg' : '#FF6F00',
'fg' : '#FFFFFF'
}
},
{
'id' : 'scrumboard',
'title' : 'Scrumboard',
'translate': 'NAV.SCRUMBOARD',
'type' : 'item',
'icon' : 'assessment',
'url' : '/apps/scrumboard'
}
]
},
{
'id' : 'pages',
'title' : 'Pages',
'type' : 'group',
'icon' : 'pages',
'children': [
{
'id' : 'authentication',
'title' : 'Authentication',
'type' : 'collapse',
'icon' : 'lock',
'badge' : {
'title': 10,
'bg' : '#525e8a',
'fg' : '#FFFFFF'
},
'children': [
{
'id' : 'login',
'title': 'Login',
'type' : 'item',
'url' : '/pages/auth/login'
},
{
'id' : 'login-v2',
'title': 'Login v2',
'type' : 'item',
'url' : '/pages/auth/login-2'
},
{
'id' : 'register',
'title': 'Register',
'type' : 'item',
'url' : '/pages/auth/register'
},
{
'id' : 'register-v2',
'title': 'Register v2',
'type' : 'item',
'url' : '/pages/auth/register-2'
},
{
'id' : 'forgot-password',
'title': 'Forgot Password',
'type' : 'item',
'url' : '/pages/auth/forgot-password'
},
{
'id' : 'forgot-password-v2',
'title': 'Forgot Password v2',
'type' : 'item',
'url' : '/pages/auth/forgot-password-2'
},
{
'id' : 'reset-password',
'title': 'Reset Password',
'type' : 'item',
'url' : '/pages/auth/reset-password'
},
{
'id' : 'reset-password-v2',
'title': 'Reset Password v2',
'type' : 'item',
'url' : '/pages/auth/reset-password-2'
},
{
'id' : 'lock-screen',
'title': 'Lock Screen',
'type' : 'item',
'url' : '/pages/auth/lock'
},
{
'id' : 'mail-confirmation',
'title': 'Mail Confirmation',
'type' : 'item',
'url' : '/pages/auth/mail-confirm'
}
]
},
{
'id' : 'coming-soon',
'title': 'Coming Soon',
'type' : 'item',
'icon' : 'alarm',
'url' : '/pages/coming-soon'
},
{
'id' : 'errors',
'title' : 'Errors',
'type' : 'collapse',
'icon' : 'error',
'children': [
{
'id' : '404',
'title': '404',
'type' : 'item',
'url' : '/pages/errors/error-404'
},
{
'id' : '500',
'title': '500',
'type' : 'item',
'url' : '/pages/errors/error-500'
}
]
},
{
'id' : 'invoice',
'title' : 'Invoice',
'type' : 'collapse',
'icon' : 'receipt',
'children': [
{
'id' : 'modern',
'title': 'Modern',
'type' : 'item',
'url' : '/pages/invoices/modern'
},
{
'id' : 'compact',
'title': 'Compact',
'type' : 'item',
'url' : '/pages/invoices/compact'
}
]
},
{
'id' : 'maintenance',
'title': 'Maintenance',
'type' : 'item',
'icon' : 'build',
'url' : '/pages/maintenance'
},
{
'id' : 'pricing',
'title' : 'Pricing',
'type' : 'collapse',
'icon' : 'attach_money',
'children': [
{
'id' : 'style-1',
'title': 'Style 1',
'type' : 'item',
'url' : '/pages/pricing/style-1'
},
{
'id' : 'style-2',
'title': 'Style 2',
'type' : 'item',
'url' : '/pages/pricing/style-2'
},
{
'id' : 'style-3',
'title': 'Style 3',
'type' : 'item',
'url' : '/pages/pricing/style-3'
}
]
},
{
'id' : 'profile',
'title': 'Profile',
'type' : 'item',
'icon' : 'person',
'url' : '/pages/profile'
},
{
'id' : 'search',
'title': 'Search',
'type' : 'item',
'icon' : 'search',
'url' : '/pages/search'
},
{
'title': 'Faq',
'type' : 'item',
'icon' : 'help',
'url' : '/pages/faq'
},
{
'title': 'Knowledge Base',
'type' : 'item',
'icon' : 'import_contacts',
'url' : '/pages/knowledge-base'
}
]
},
{
'id' : 'user-interface',
'title' : 'User Interface',
'type' : 'group',
'icon' : 'web',
'children': [
{
'id' : 'forms',
'title': 'Forms',
'type' : 'item',
'icon' : 'web_asset',
'url' : '/ui/forms'
},
{
'id' : 'icons',
'title': 'Icons',
'type' : 'item',
'icon' : 'photo',
'url' : '/ui/icons'
},
{
'id' : 'typography',
'title': 'Typography',
'type' : 'item',
'icon' : 'text_fields',
'url' : '/ui/typography'
},
{
'id' : 'helper-classes',
'title': 'Helper Classes',
'type' : 'item',
'icon' : 'help',
'url' : '/ui/helper-classes'
},
{
'id' : 'page-layouts',
'title' : 'Page Layouts',
'type' : 'collapse',
'icon' : 'view_quilt',
'children': [
{
'id' : 'carded',
'title' : 'Carded',
'type' : 'collapse',
'badge' : {
'title': 10,
'bg' : '#525e8a',
'fg' : '#FFFFFF'
},
'children': [
{
'id' : 'full-width',
'title': 'Full Width',
'type' : 'item',
'url' : '/ui/page-layouts/carded/full-width'
},
{
'id' : 'full-width-2',
'title': 'Full Width 2',
'type' : 'item',
'url' : '/ui/page-layouts/carded/full-width-2'
},
{
'id' : 'left-sidenav',
'title': 'Left Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav'
},
{
'id' : 'left-sidenav-tabbed',
'title': 'Left Sidenav Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-tabbed'
},
{
'id' : 'left-sidenav-2',
'title': 'Left Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-2'
},
{
'id' : 'left-sidenav-2-tabbed',
'title': 'Left Sidenav 2 Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-2-tabbed'
},
{
'id' : 'right-sidenav',
'title': 'Right Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav'
},
{
'id' : 'right-sidenav-tabbed',
'title': 'Right Sidenav Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-tabbed'
},
{
'id' : 'right-sidenav-2',
'title': 'Right Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-2'
},
{
'id' : 'right-sidenav-2-tabbed',
'title': 'Right Sidenav 2 Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-2-tabbed'
}
]
},
{
'id' : 'simple',
'title' : 'Simple',
'type' : 'collapse',
'badge' : {
'title': 8,
'bg' : '#525e8a',
'fg' : '#FFFFFF'
},
'children': [
{
'id' : 'full-width',
'title': 'Full Width',
'type' : 'item',
'url' : '/ui/page-layouts/simple/full-width'
},
{
'id' : 'left-sidenav',
'title': 'Left Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav'
},
{
'id' : 'left-sidenav-2',
'title': 'Left Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav-2'
},
{
'id' : 'left-sidenav-3',
'title': 'Left Sidenav 3',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav-3'
},
{
'id' : 'right-sidenav',
'title': 'Right Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav'
},
{
'id' : 'right-sidenav-2',
'title': 'Right Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav-2'
},
{
'id' : 'right-sidenav-3',
'title': 'Right Sidenav 3',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav-3'
},
{
'id' : 'tabbed',
'title': 'Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/simple/tabbed'
}
]
},
{
'id' : 'blank',
'title': 'Blank',
'type' : 'item',
'url' : '/ui/page-layouts/blank'
}
]
},
{
'id' : 'colors',
'title': 'Colors',
'type' : 'item',
'icon' : 'color_lens',
'url' : '/ui/colors'
}
]
},
{
'id' : 'services',
'title' : 'Services',
'type' : 'group',
'icon' : 'settings',
'children': [
{
'id' : 'config',
'title': 'Config',
'type' : 'item',
'icon' : 'settings',
'url' : '/services/config'
},
{
'id' : 'splash-screen',
'title': 'Splash Screen',
'type' : 'item',
'icon' : 'settings',
'url' : '/services/splash-screen'
}
]
},
{
'id' : 'components',
'title' : 'Components',
'type' : 'group',
'icon' : 'settings_input_component',
'children': [
{
'id' : 'angular-material-elements',
'title' : 'Angular Material Elements',
'type' : 'collapse',
'icon' : 'layers',
'children': [
{
'id' : 'form-controls',
'title' : 'Form Controls',
'type' : 'group',
'children': [
{
'id' : 'autocomplete',
'title': 'Autocomplete',
'type' : 'item',
'url' : '/components/angular-material/autocomplete'
},
{
'id' : 'checkbox',
'title': 'Checkbox',
'type' : 'item',
'url' : '/components/angular-material/checkbox'
},
{
'id' : 'datepicker',
'title': 'Datepicker',
'type' : 'item',
'url' : '/components/angular-material/datepicker'
},
{
'id' : 'form-field',
'title': 'Form field',
'type' : 'item',
'url' : '/components/angular-material/form-field'
},
{
'id' : 'input',
'title': 'Input',
'type' : 'item',
'url' : '/components/angular-material/input'
},
{
'id' : 'radio-button',
'title': 'Radio button',
'type' : 'item',
'url' : '/components/angular-material/radio-button'
},
{
'id' : 'select',
'title': 'Select',
'type' : 'item',
'url' : '/components/angular-material/select'
},
{
'id' : 'slider',
'title': 'Slider',
'type' : 'item',
'url' : '/components/angular-material/slider'
},
{
'id' : 'slide-toggle',
'title': 'Slide toggle',
'type' : 'item',
'url' : '/components/angular-material/slide-toggle'
}
]
},
{
'id' : 'navigation',
'title' : 'Navigation',
'type' : 'group',
'children': [
{
'id' : 'menu',
'title': 'Menu',
'type' : 'item',
'url' : '/components/angular-material/menu'
},
{
'id' : 'sidenav',
'title': 'Sidenav',
'type' : 'item',
'url' : '/components/angular-material/sidenav'
},
{
'id' : 'toolbar',
'title': 'Toolbar',
'type' : 'item',
'url' : '/components/angular-material/toolbar'
}
]
},
{
'id' : 'layout',
'title' : 'Layout',
'type' : 'group',
'children': [
{
'id' : 'list',
'title': 'List',
'type' : 'item',
'url' : '/components/angular-material/list'
},
{
'id' : 'grid-list',
'title': 'Grid list',
'type' : 'item',
'url' : '/components/angular-material/grid-list'
},
{
'id' : 'card',
'title': 'Card',
'type' : 'item',
'url' : '/components/angular-material/card'
},
{
'id' : 'stepper',
'title': 'Stepper',
'type' : 'item',
'url' : '/components/angular-material/stepper'
},
{
'id' : 'tabs',
'title': 'Tabs',
'type' : 'item',
'url' : '/components/angular-material/tabs'
},
{
'id' : 'elevation',
'title': 'Elevation',
'type' : 'item',
'url' : '/components/angular-material/elevation'
},
{
'id' : 'expansion-panel',
'title': 'Expansion Panel',
'type' : 'item',
'url' : '/components/angular-material/expansion-panel'
}
]
},
{
'id' : 'buttons-indicators',
'title' : 'Buttons & Indicators',
'type' : 'group',
'children': [
{
'id' : 'button',
'title': 'Button',
'type' : 'item',
'url' : '/components/angular-material/button'
},
{
'id' : 'button-toggle',
'title': 'Button toggle',
'type' : 'item',
'url' : '/components/angular-material/button-toggle'
},
{
'id' : 'chips',
'title': 'Chips',
'type' : 'item',
'url' : '/components/angular-material/chips'
},
{
'id' : 'icon',
'title': 'Icon',
'type' : 'item',
'url' : '/components/angular-material/icon'
},
{
'id' : 'progress-spinner',
'title': 'Progress spinner',
'type' : 'item',
'url' : '/components/angular-material/progress-spinner'
},
{
'id' : 'progress-bar',
'title': 'Progress bar',
'type' : 'item',
'url' : '/components/angular-material/progress-bar'
}
]
},
{
'id' : 'popups-modals',
'title' : 'Popups & Modals',
'type' : 'group',
'children': [
{
'id' : 'dialog',
'title': 'Dialog',
'type' : 'item',
'url' : '/components/angular-material/dialog'
},
{
'id' : 'tooltip',
'title': 'Tooltip',
'type' : 'item',
'url' : '/components/angular-material/tooltip'
},
{
'id' : 'snackbar',
'title': 'Snackbar',
'type' : 'item',
'url' : '/components/angular-material/snackbar'
}
]
},
{
'id' : 'data-table',
'title' : 'Data table',
'type' : 'group',
'children': [
{
'id' : 'table',
'title': 'Table',
'type' : 'item',
'url' : '/components/angular-material/data-table'
},
{
'id' : 'sort-header',
'title': 'Sort header',
'type' : 'item',
'url' : '/components/angular-material/sort-header'
},
{
'id' : 'paginator',
'title': 'Paginator',
'type' : 'item',
'url' : '/components/angular-material/paginator'
}
]
}
]
},
{
'id' : 'cards',
'title': 'Cards',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/cards'
},
{
'id' : 'countdown',
'title': 'Countdown',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/countdown'
},
{
'id' : 'highlight',
'title': 'Highlight',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/highlight'
},
{
'id' : 'material-color-picker',
'title': 'Material Color Picker',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/material-color-picker'
},
{
'id' : 'multi-language',
'title': 'Multi Language',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/multi-language'
},
{
'id' : 'navigation',
'title': 'Navigation',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/navigation'
},
{
'id' : 'search-bar',
'title': 'Search Bar',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/search-bar'
},
{
'id' : 'shortcuts',
'title': 'Shortcuts',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/shortcuts'
},
{
'id' : 'widget',
'title': 'Widget',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/widget'
}
]
},
{
'id' : '3rd-party-components',
'title' : '3rd Party components',
'type' : 'group',
'icon' : 'settings_input_component',
'children': [
{
'id' : 'datatables',
'title' : 'Datatables',
'type' : 'collapse',
'icon' : 'border_all',
'children': [
{
'id' : 'ngxdatatable',
'title': 'ngx-datatable',
'type' : 'item',
'url' : '/components-third-party/datatables/ngx-datatable'
}
]
},
{
'id' : 'google-maps',
'title': 'Google Maps',
'type' : 'item',
'icon' : 'place',
'url' : '/components-third-party/google-maps'
}
]
}
];
}
}

903
src/app/navigation/navigation.ts Normal file
View File

@ -0,0 +1,903 @@
export const navigation = [
{
'id' : 'applications',
'title' : 'Applications',
'translate': 'NAV.APPLICATIONS',
'type' : 'group',
'icon' : 'apps',
'children' : [
{
'id' : 'dashboards',
'title' : 'Dashboards',
'translate': 'NAV.DASHBOARDS',
'type' : 'collapse',
'icon' : 'dashboard',
'children' : [
{
'id' : 'analytics',
'title': 'Analytics',
'type' : 'item',
'url' : '/apps/dashboards/analytics'
},
{
'id' : 'project',
'title': 'Project',
'type' : 'item',
'url' : '/apps/dashboards/project'
}
]
},
{
'id' : 'calendar',
'title' : 'Calendar',
'translate': 'NAV.CALENDAR',
'type' : 'item',
'icon' : 'today',
'url' : '/apps/calendar'
},
{
'id' : 'e-commerce',
'title' : 'E-Commerce',
'translate': 'NAV.ECOMMERCE',
'type' : 'collapse',
'icon' : 'shopping_cart',
'children' : [
{
'id' : 'dashboard',
'title': 'Dashboard',
'type' : 'item',
'url' : '/apps/e-commerce/dashboard'
},
{
'id' : 'products',
'title' : 'Products',
'type' : 'item',
'url' : '/apps/e-commerce/products',
'exactMatch': true
},
{
'id' : 'productDetail',
'title' : 'Product Detail',
'type' : 'item',
'url' : '/apps/e-commerce/products/1/printed-dress',
'exactMatch': true
},
{
'id' : 'orders',
'title' : 'Orders',
'type' : 'item',
'url' : '/apps/e-commerce/orders',
'exactMatch': true
},
{
'id' : 'orderDetail',
'title' : 'Order Detail',
'type' : 'item',
'url' : '/apps/e-commerce/orders/1',
'exactMatch': true
}
]
},
{
'id' : 'academy',
'title' : 'Academy',
'translate': 'NAV.ACADEMY',
'type' : 'item',
'icon' : 'school',
'url' : '/apps/academy'
},
{
'id' : 'mail',
'title' : 'Mail',
'translate': 'NAV.MAIL.TITLE',
'type' : 'item',
'icon' : 'email',
'url' : '/apps/mail',
'badge' : {
'title' : 25,
'translate': 'NAV.MAIL.BADGE',
'bg' : '#F44336',
'fg' : '#FFFFFF'
}
},
{
'id' : 'mail-ngrx',
'title' : 'Mail Ngrx',
'translate': 'NAV.MAIL_NGRX.TITLE',
'type' : 'item',
'icon' : 'email',
'url' : '/apps/mail-ngrx',
'badge' : {
'title' : 13,
'translate': 'NAV.MAIL_NGRX.BADGE',
'bg' : '#EC0C8E',
'fg' : '#FFFFFF'
}
},
{
'id' : 'chat',
'title' : 'Chat',
'translate': 'NAV.CHAT',
'type' : 'item',
'icon' : 'chat',
'url' : '/apps/chat',
'badge' : {
'title': 13,
'bg' : '#09d261',
'fg' : '#FFFFFF'
}
},
{
'id' : 'file-manager',
'title' : 'File Manager',
'translate': 'NAV.FILE_MANAGER',
'type' : 'item',
'icon' : 'folder',
'url' : '/apps/file-manager'
},
{
'id' : 'contacts',
'title' : 'Contacts',
'translate': 'NAV.CONTACTS',
'type' : 'item',
'icon' : 'account_box',
'url' : '/apps/contacts'
},
{
'id' : 'to-do',
'title' : 'To-Do',
'translate': 'NAV.TODO',
'type' : 'item',
'icon' : 'check_box',
'url' : '/apps/todo',
'badge' : {
'title': 3,
'bg' : '#FF6F00',
'fg' : '#FFFFFF'
}
},
{
'id' : 'scrumboard',
'title' : 'Scrumboard',
'translate': 'NAV.SCRUMBOARD',
'type' : 'item',
'icon' : 'assessment',
'url' : '/apps/scrumboard'
}
]
},
{
'id' : 'pages',
'title' : 'Pages',
'type' : 'group',
'icon' : 'pages',
'children': [
{
'id' : 'authentication',
'title' : 'Authentication',
'type' : 'collapse',
'icon' : 'lock',
'badge' : {
'title': 10,
'bg' : '#525e8a',
'fg' : '#FFFFFF'
},
'children': [
{
'id' : 'login',
'title': 'Login',
'type' : 'item',
'url' : '/pages/auth/login'
},
{
'id' : 'login-v2',
'title': 'Login v2',
'type' : 'item',
'url' : '/pages/auth/login-2'
},
{
'id' : 'register',
'title': 'Register',
'type' : 'item',
'url' : '/pages/auth/register'
},
{
'id' : 'register-v2',
'title': 'Register v2',
'type' : 'item',
'url' : '/pages/auth/register-2'
},
{
'id' : 'forgot-password',
'title': 'Forgot Password',
'type' : 'item',
'url' : '/pages/auth/forgot-password'
},
{
'id' : 'forgot-password-v2',
'title': 'Forgot Password v2',
'type' : 'item',
'url' : '/pages/auth/forgot-password-2'
},
{
'id' : 'reset-password',
'title': 'Reset Password',
'type' : 'item',
'url' : '/pages/auth/reset-password'
},
{
'id' : 'reset-password-v2',
'title': 'Reset Password v2',
'type' : 'item',
'url' : '/pages/auth/reset-password-2'
},
{
'id' : 'lock-screen',
'title': 'Lock Screen',
'type' : 'item',
'url' : '/pages/auth/lock'
},
{
'id' : 'mail-confirmation',
'title': 'Mail Confirmation',
'type' : 'item',
'url' : '/pages/auth/mail-confirm'
}
]
},
{
'id' : 'coming-soon',
'title': 'Coming Soon',
'type' : 'item',
'icon' : 'alarm',
'url' : '/pages/coming-soon'
},
{
'id' : 'errors',
'title' : 'Errors',
'type' : 'collapse',
'icon' : 'error',
'children': [
{
'id' : '404',
'title': '404',
'type' : 'item',
'url' : '/pages/errors/error-404'
},
{
'id' : '500',
'title': '500',
'type' : 'item',
'url' : '/pages/errors/error-500'
}
]
},
{
'id' : 'invoice',
'title' : 'Invoice',
'type' : 'collapse',
'icon' : 'receipt',
'children': [
{
'id' : 'modern',
'title': 'Modern',
'type' : 'item',
'url' : '/pages/invoices/modern'
},
{
'id' : 'compact',
'title': 'Compact',
'type' : 'item',
'url' : '/pages/invoices/compact'
}
]
},
{
'id' : 'maintenance',
'title': 'Maintenance',
'type' : 'item',
'icon' : 'build',
'url' : '/pages/maintenance'
},
{
'id' : 'pricing',
'title' : 'Pricing',
'type' : 'collapse',
'icon' : 'attach_money',
'children': [
{
'id' : 'style-1',
'title': 'Style 1',
'type' : 'item',
'url' : '/pages/pricing/style-1'
},
{
'id' : 'style-2',
'title': 'Style 2',
'type' : 'item',
'url' : '/pages/pricing/style-2'
},
{
'id' : 'style-3',
'title': 'Style 3',
'type' : 'item',
'url' : '/pages/pricing/style-3'
}
]
},
{
'id' : 'profile',
'title': 'Profile',
'type' : 'item',
'icon' : 'person',
'url' : '/pages/profile'
},
{
'id' : 'search',
'title': 'Search',
'type' : 'item',
'icon' : 'search',
'url' : '/pages/search'
},
{
'title': 'Faq',
'type' : 'item',
'icon' : 'help',
'url' : '/pages/faq'
},
{
'title': 'Knowledge Base',
'type' : 'item',
'icon' : 'import_contacts',
'url' : '/pages/knowledge-base'
}
]
},
{
'id' : 'user-interface',
'title' : 'User Interface',
'type' : 'group',
'icon' : 'web',
'children': [
{
'id' : 'forms',
'title': 'Forms',
'type' : 'item',
'icon' : 'web_asset',
'url' : '/ui/forms'
},
{
'id' : 'icons',
'title': 'Icons',
'type' : 'item',
'icon' : 'photo',
'url' : '/ui/icons'
},
{
'id' : 'typography',
'title': 'Typography',
'type' : 'item',
'icon' : 'text_fields',
'url' : '/ui/typography'
},
{
'id' : 'helper-classes',
'title': 'Helper Classes',
'type' : 'item',
'icon' : 'help',
'url' : '/ui/helper-classes'
},
{
'id' : 'page-layouts',
'title' : 'Page Layouts',
'type' : 'collapse',
'icon' : 'view_quilt',
'children': [
{
'id' : 'carded',
'title' : 'Carded',
'type' : 'collapse',
'badge' : {
'title': 10,
'bg' : '#525e8a',
'fg' : '#FFFFFF'
},
'children': [
{
'id' : 'full-width',
'title': 'Full Width',
'type' : 'item',
'url' : '/ui/page-layouts/carded/full-width'
},
{
'id' : 'full-width-2',
'title': 'Full Width 2',
'type' : 'item',
'url' : '/ui/page-layouts/carded/full-width-2'
},
{
'id' : 'left-sidenav',
'title': 'Left Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav'
},
{
'id' : 'left-sidenav-tabbed',
'title': 'Left Sidenav Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-tabbed'
},
{
'id' : 'left-sidenav-2',
'title': 'Left Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-2'
},
{
'id' : 'left-sidenav-2-tabbed',
'title': 'Left Sidenav 2 Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-2-tabbed'
},
{
'id' : 'right-sidenav',
'title': 'Right Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav'
},
{
'id' : 'right-sidenav-tabbed',
'title': 'Right Sidenav Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-tabbed'
},
{
'id' : 'right-sidenav-2',
'title': 'Right Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-2'
},
{
'id' : 'right-sidenav-2-tabbed',
'title': 'Right Sidenav 2 Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-2-tabbed'
}
]
},
{
'id' : 'simple',
'title' : 'Simple',
'type' : 'collapse',
'badge' : {
'title': 8,
'bg' : '#525e8a',
'fg' : '#FFFFFF'
},
'children': [
{
'id' : 'full-width',
'title': 'Full Width',
'type' : 'item',
'url' : '/ui/page-layouts/simple/full-width'
},
{
'id' : 'left-sidenav',
'title': 'Left Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav'
},
{
'id' : 'left-sidenav-2',
'title': 'Left Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav-2'
},
{
'id' : 'left-sidenav-3',
'title': 'Left Sidenav 3',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav-3'
},
{
'id' : 'right-sidenav',
'title': 'Right Sidenav',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav'
},
{
'id' : 'right-sidenav-2',
'title': 'Right Sidenav 2',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav-2'
},
{
'id' : 'right-sidenav-3',
'title': 'Right Sidenav 3',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav-3'
},
{
'id' : 'tabbed',
'title': 'Tabbed',
'type' : 'item',
'url' : '/ui/page-layouts/simple/tabbed'
}
]
},
{
'id' : 'blank',
'title': 'Blank',
'type' : 'item',
'url' : '/ui/page-layouts/blank'
}
]
},
{
'id' : 'colors',
'title': 'Colors',
'type' : 'item',
'icon' : 'color_lens',
'url' : '/ui/colors'
}
]
},
{
'id' : 'services',
'title' : 'Services',
'type' : 'group',
'icon' : 'settings',
'children': [
{
'id' : 'config',
'title': 'Config',
'type' : 'item',
'icon' : 'settings',
'url' : '/services/config'
},
{
'id' : 'splash-screen',
'title': 'Splash Screen',
'type' : 'item',
'icon' : 'settings',
'url' : '/services/splash-screen'
}
]
},
{
'id' : 'components',
'title' : 'Components',
'type' : 'group',
'icon' : 'settings_input_component',
'children': [
{
'id' : 'angular-material-elements',
'title' : 'Angular Material Elements',
'type' : 'collapse',
'icon' : 'layers',
'children': [
{
'id' : 'form-controls',
'title' : 'Form Controls',
'type' : 'group',
'children': [
{
'id' : 'autocomplete',
'title': 'Autocomplete',
'type' : 'item',
'url' : '/components/angular-material/autocomplete'
},
{
'id' : 'checkbox',
'title': 'Checkbox',
'type' : 'item',
'url' : '/components/angular-material/checkbox'
},
{
'id' : 'datepicker',
'title': 'Datepicker',
'type' : 'item',
'url' : '/components/angular-material/datepicker'
},
{
'id' : 'form-field',
'title': 'Form field',
'type' : 'item',
'url' : '/components/angular-material/form-field'
},
{
'id' : 'input',
'title': 'Input',
'type' : 'item',
'url' : '/components/angular-material/input'
},
{
'id' : 'radio-button',
'title': 'Radio button',
'type' : 'item',
'url' : '/components/angular-material/radio-button'
},
{
'id' : 'select',
'title': 'Select',
'type' : 'item',
'url' : '/components/angular-material/select'
},
{
'id' : 'slider',
'title': 'Slider',
'type' : 'item',
'url' : '/components/angular-material/slider'
},
{
'id' : 'slide-toggle',
'title': 'Slide toggle',
'type' : 'item',
'url' : '/components/angular-material/slide-toggle'
}
]
},
{
'id' : 'navigation',
'title' : 'Navigation',
'type' : 'group',
'children': [
{
'id' : 'menu',
'title': 'Menu',
'type' : 'item',
'url' : '/components/angular-material/menu'
},
{
'id' : 'sidenav',
'title': 'Sidenav',
'type' : 'item',
'url' : '/components/angular-material/sidenav'
},
{
'id' : 'toolbar',
'title': 'Toolbar',
'type' : 'item',
'url' : '/components/angular-material/toolbar'
}
]
},
{
'id' : 'layout',
'title' : 'Layout',
'type' : 'group',
'children': [
{
'id' : 'list',
'title': 'List',
'type' : 'item',
'url' : '/components/angular-material/list'
},
{
'id' : 'grid-list',
'title': 'Grid list',
'type' : 'item',
'url' : '/components/angular-material/grid-list'
},
{
'id' : 'card',
'title': 'Card',
'type' : 'item',
'url' : '/components/angular-material/card'
},
{
'id' : 'stepper',
'title': 'Stepper',
'type' : 'item',
'url' : '/components/angular-material/stepper'
},
{
'id' : 'tabs',
'title': 'Tabs',
'type' : 'item',
'url' : '/components/angular-material/tabs'
},
{
'id' : 'elevation',
'title': 'Elevation',
'type' : 'item',
'url' : '/components/angular-material/elevation'
},
{
'id' : 'expansion-panel',
'title': 'Expansion Panel',
'type' : 'item',
'url' : '/components/angular-material/expansion-panel'
}
]
},
{
'id' : 'buttons-indicators',
'title' : 'Buttons & Indicators',
'type' : 'group',
'children': [
{
'id' : 'button',
'title': 'Button',
'type' : 'item',
'url' : '/components/angular-material/button'
},
{
'id' : 'button-toggle',
'title': 'Button toggle',
'type' : 'item',
'url' : '/components/angular-material/button-toggle'
},
{
'id' : 'chips',
'title': 'Chips',
'type' : 'item',
'url' : '/components/angular-material/chips'
},
{
'id' : 'icon',
'title': 'Icon',
'type' : 'item',
'url' : '/components/angular-material/icon'
},
{
'id' : 'progress-spinner',
'title': 'Progress spinner',
'type' : 'item',
'url' : '/components/angular-material/progress-spinner'
},
{
'id' : 'progress-bar',
'title': 'Progress bar',
'type' : 'item',
'url' : '/components/angular-material/progress-bar'
}
]
},
{
'id' : 'popups-modals',
'title' : 'Popups & Modals',
'type' : 'group',
'children': [
{
'id' : 'dialog',
'title': 'Dialog',
'type' : 'item',
'url' : '/components/angular-material/dialog'
},
{
'id' : 'tooltip',
'title': 'Tooltip',
'type' : 'item',
'url' : '/components/angular-material/tooltip'
},
{
'id' : 'snackbar',
'title': 'Snackbar',
'type' : 'item',
'url' : '/components/angular-material/snackbar'
}
]
},
{
'id' : 'data-table',
'title' : 'Data table',
'type' : 'group',
'children': [
{
'id' : 'table',
'title': 'Table',
'type' : 'item',
'url' : '/components/angular-material/data-table'
},
{
'id' : 'sort-header',
'title': 'Sort header',
'type' : 'item',
'url' : '/components/angular-material/sort-header'
},
{
'id' : 'paginator',
'title': 'Paginator',
'type' : 'item',
'url' : '/components/angular-material/paginator'
}
]
}
]
},
{
'id' : 'cards',
'title': 'Cards',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/cards'
},
{
'id' : 'countdown',
'title': 'Countdown',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/countdown'
},
{
'id' : 'highlight',
'title': 'Highlight',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/highlight'
},
{
'id' : 'material-color-picker',
'title': 'Material Color Picker',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/material-color-picker'
},
{
'id' : 'multi-language',
'title': 'Multi Language',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/multi-language'
},
{
'id' : 'navigation',
'title': 'Navigation',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/navigation'
},
{
'id' : 'search-bar',
'title': 'Search Bar',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/search-bar'
},
{
'id' : 'shortcuts',
'title': 'Shortcuts',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/shortcuts'
},
{
'id' : 'widget',
'title': 'Widget',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/widget'
}
]
},
{
'id' : '3rd-party-components',
'title' : '3rd Party components',
'type' : 'group',
'icon' : 'settings_input_component',
'children': [
{
'id' : 'datatables',
'title' : 'Datatables',
'type' : 'collapse',
'icon' : 'border_all',
'children': [
{
'id' : 'ngxdatatable',
'title': 'ngx-datatable',
'type' : 'item',
'url' : '/components-third-party/datatables/ngx-datatable'
}
]
},
{
'id' : 'google-maps',
'title': 'Google Maps',
'type' : 'item',
'icon' : 'place',
'url' : '/components-third-party/google-maps'
}
]
}
];