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

Entirely changed the navigation model structure (sorry!)

Browse Source 
+ Fixed: Horizontal and Vertical navigation must be able to use the same model structure
+ Fixed: Collapsable nav item that has the active menu shouldn't be collapsed when other collapsables toggles
This commit is contained in:
Sercan Yemen 2017-09-21 12:08:52 +03:00
parent 769e67c2f3
commit b9198e3717
15 changed files with 215 additions and 544 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
View File

@ -9,9 +9,8 @@
<div class="{{fuseSettings.colorClasses.navbar}}">
<ng-container *ngFor="let item of item.children">
<fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
<fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
[item]="item"></fuse-nav-horizontal-collapse>
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
<fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
</ng-container>
</div>

21
src/app/core/components/navigation/navigation.component.html
View File

@ -1,27 +1,32 @@
<div id="main-navigation" class="nav" [ngClass]="{'horizontal':layout === 'horizontal'}">
<div id="main-navigation" class="nav"
[ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
<!-- Vertical Navigation Layout -->
<ng-container *ngIf="layout === 'vertical'">
<ng-container *ngFor="let item of verticalNavigation">
<ng-container *ngFor="let item of navigationModel">
<fuse-nav-vertical-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-vertical-subheader>
<fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
<fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
<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>
</ng-container>
<!-- / Vertical Navigation Layout -->
<!-- Horizontal Navigation Layout -->
<ng-container *ngIf="layout === 'horizontal'">
<ng-container *ngFor="let item of horizontalNavigation">
<ng-container *ngFor="let item of navigationModel">
<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>
<fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
<fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
[item]="item"></fuse-nav-horizontal-collapse>
</ng-container>
</ng-container>
<!-- / Horizontal Navigation Layout -->
</div>

6
src/app/core/components/navigation/navigation.component.ts
View File

@ -9,15 +9,13 @@ import { FuseNavigationService } from './navigation.service';
})
export class FuseNavigationComponent
{
verticalNavigation: any[];
horizontalNavigation: any[];
navigationModel: any[];
@Input('layout') layout = 'vertical';
constructor(private navigationService: FuseNavigationService)
{
this.verticalNavigation = navigationService.getNavigation('verticalNavItems');
this.horizontalNavigation = navigationService.getNavigation('horizontalNavItems');
this.navigationModel = navigationService.getNavigationModel();
}
}

4
src/app/core/components/navigation/navigation.module.ts
View File

@ -4,7 +4,7 @@ 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';
import { FuseNavVerticalSubheaderComponent } from './vertical/nav-subheader/nav-vertical-subheader.component';
import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
@ -18,7 +18,7 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
],
declarations: [
FuseNavigationComponent,
FuseNavVerticalSubheaderComponent,
FuseNavVerticalGroupComponent,
FuseNavVerticalItemComponent,
FuseNavVerticalCollapseComponent,
FuseNavHorizontalItemComponent,

14
src/app/core/components/navigation/navigation.service.ts
View File

@ -1,25 +1,25 @@
import { EventEmitter, Injectable } from '@angular/core';
import { FuseNavigation } from '../../../navigation.model';
import { NavigationModel } from '../../../navigation.model';
@Injectable()
export class FuseNavigationService
{
onNavCollapseToggled = new EventEmitter<any>();
navigation: FuseNavigation;
navigationModel: NavigationModel;
flatNavigation: any[] = [];
constructor()
{
this.navigation = new FuseNavigation();
this.navigationModel = new NavigationModel();
}
/**
* Get navigation array
* Get navigation model
* @returns {any[]}
*/
getNavigation(item)
getNavigationModel()
{
return this.navigation[item];
return this.navigationModel.model;
}
/**
@ -31,7 +31,7 @@ export class FuseNavigationService
{
if ( !navigationItems )
{
navigationItems = this.navigation;
navigationItems = this.navigationModel;
}
for ( const navItem of navigationItems )

4
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
View File

@ -5,7 +5,7 @@
</a>
<div class="children" [@slideInOut]="isOpen">
<ng-container *ngFor="let item of item.children">
<fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
<fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
<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>
</ng-container>
</div>

12
src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
View File

@ -15,7 +15,10 @@ export class FuseNavVerticalCollapseComponent implements OnInit
@HostBinding('class') classes = 'nav-collapse nav-item';
@HostBinding('class.open') public isOpen = false;
constructor(private navigationService: FuseNavigationService, private router: Router)
constructor(
private navigationService: FuseNavigationService,
private router: Router
)
{
// Listen for route changes
router.events.subscribe(
@ -49,6 +52,13 @@ export class FuseNavVerticalCollapseComponent implements OnInit
return;
}
// Check if the url can be found in
// one of the children of this item
if ( this.isUrlInChildren(this.item, this.router.url) )
{
return;
}
// If the clicked item is not this item, collapse...
if ( this.item !== clickedItem )
{

10
src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html Normal file
View File

@ -0,0 +1,10 @@
<div class="group-title">
<span class="hint-text">{{ 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>

23
src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss Normal file
View File

@ -0,0 +1,23 @@
:host {
.folded:not(.folded-open) & {
> .group-title {
align-items: center;
> span {
opacity: 0;
transition: opacity 200ms ease;
}
&:before {
content: '';
display: block;
position: absolute;
min-width: 1.6rem;
border-top: 2px solid;
opacity: 0.2;
}
}
}
}

21
src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component, HostBinding, Input, OnInit } from '@angular/core';
@Component({
selector : 'fuse-nav-vertical-group',
templateUrl: './nav-vertical-group.component.html',
styleUrls : ['./nav-vertical-group.component.scss']
})
export class FuseNavVerticalGroupComponent implements OnInit
{
@HostBinding('class') classes = 'nav-group';
@Input() item: any;
constructor()
{
}
ngOnInit()
{
}
}

1
src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html
View File

@ -1 +0,0 @@
<span class="hint-text">{{ item.title }}</span>

20
src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss
View File

@ -1,20 +0,0 @@
:host {
.folded:not(.folded-open) & {
&:before {
content: '';
display: block;
position: absolute;
min-width: 1.6rem;
border-top: 2px solid;
opacity: 0.2;
}
> span {
opacity: 0;
transition: opacity 200ms ease;
}
}
}

21
src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts
View File

@ -1,21 +0,0 @@
import { Component, HostBinding, Input, OnInit } from '@angular/core';
@Component({
selector : 'fuse-nav-vertical-subheader',
templateUrl: './nav-vertical-subheader.component.html',
styleUrls : ['./nav-vertical-subheader.component.scss']
})
export class FuseNavVerticalSubheaderComponent implements OnInit
{
@HostBinding('class') classes = 'nav-subheader';
@Input() item: any;
constructor()
{
}
ngOnInit()
{
}
}

40
src/app/core/scss/partials/_navigation.scss
View File

@ -11,6 +11,21 @@
white-space: nowrap;
}
.nav-group {
> .group-title {
position: relative;
display: flex;
align-items: center;
height: 48px;
font-weight: 500;
padding-left: 24px;
margin-top: 8px;
font-size: 12px;
white-space: nowrap;
}
}
.nav-item {
.nav-link {
@ -119,6 +134,31 @@
}
}
> .nav-group {
> .group-items {
> .nav-collapse {
background: transparent;
transition: background 200ms ease-in-out;
&.open {
background: rgba(0, 0, 0, 0.12);
}
}
}
}
&.vertical {
.nav-group {
.group-title {
text-transform: uppercase;
}
}
}
&.horizontal {
display: flex;
flex-direction: row;

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

@ -1,415 +1,22 @@
export class FuseNavigation
export class NavigationModel
{
public verticalNavItems: any[];
public horizontalNavItems: any[];
model: any[];
constructor()
{
this.verticalNavItems = [
{
'title': 'APPS',
'type' : 'subheader'
},
{
'title' : 'Dashboards',
'type' : 'nav-collapse',
'icon' : 'dashboard',
'children': [
{
'type' : 'nav-item',
'title': 'Project',
'url' : '/apps/dashboards/project'
}
]
},
{
'title': 'Calendar',
'type' : 'nav-item',
'icon' : 'today',
'url' : '/apps/calendar'
},
{
'title': 'Mail',
'type' : 'nav-item',
'icon' : 'email',
'url' : '/apps/mail',
'badge': {
'title': 25,
'bg' : '#F44336',
'fg' : '#FFFFFF'
}
},
{
'title': 'Chat',
'type' : 'nav-item',
'icon' : 'chat',
'url' : '/apps/chat',
'badge': {
'title': 13,
'bg' : '#09d261',
'fg' : '#FFFFFF'
}
},
{
'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' : 'check_box',
'url' : '/apps/todo',
'badge': {
'title': 3,
'bg' : '#FF6F00',
'fg' : '#FFFFFF'
}
},
{
'title': 'Scrumboard',
'type' : 'nav-item',
'icon' : 'assessment',
'url' : '/apps/scrumboard'
},
{
'title': 'PAGES',
'type' : 'subheader'
},
{
'title' : 'Authentication',
'type' : 'nav-collapse',
'icon' : 'lock',
'children': [
{
'title': 'Login',
'type' : 'nav-item',
'url' : '/pages/auth/login'
},
{
'title': 'Login v2',
'type' : 'nav-item',
'url' : '/pages/auth/login-2'
},
{
'title': 'Register',
'type' : 'nav-item',
'url' : '/pages/auth/register'
},
{
'title': 'Register v2',
'type' : 'nav-item',
'url' : '/pages/auth/register-2'
},
{
'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'
}
]
},
{
'title': 'Coming Soon',
'type' : 'nav-item',
'icon' : 'alarm',
'url' : '/pages/coming-soon'
},
{
'title' : 'Errors',
'type' : 'nav-collapse',
'icon' : 'error',
'children': [
{
'title': '404',
'type' : 'nav-item',
'url' : '/pages/errors/error-404'
},
{
'title': '500',
'type' : 'nav-item',
'url' : '/pages/errors/error-500'
}
]
},
{
'title' : 'Invoice',
'type' : 'nav-collapse',
'icon' : 'receipt',
'children': [
{
'title': 'Modern',
'type' : 'nav-item',
'url' : '/pages/invoices/modern'
},
{
'title': 'Compact',
'type' : 'nav-item',
'url' : '/pages/invoices/compact'
}
]
},
{
'title': 'Maintenance',
'type' : 'nav-item',
'icon' : 'build',
'url' : '/pages/maintenance'
},
{
'title': 'Profile',
'type' : 'nav-item',
'icon' : 'person',
'url' : '/pages/profile'
},
{
'title': 'Search',
'type' : 'nav-item',
'icon' : 'search',
'url' : '/pages/search'
},
{
'title': 'USER INTERFACE',
'type' : 'subheader'
},
{
'title': 'Forms',
'type' : 'nav-item',
'icon' : 'web_asset',
'url' : '/ui/forms'
},
{
'title': 'Icons',
'type' : 'nav-item',
'icon' : 'photo',
'url' : '/ui/icons'
},
{
'title': 'Typography',
'type' : 'nav-item',
'icon' : 'text_fields',
'url' : '/ui/typography'
},
{
'title': 'Helper Classes',
'type' : 'nav-item',
'icon' : 'help',
'url' : '/ui/helper-classes'
},
{
'title' : 'Page Layouts',
'type' : 'nav-collapse',
'icon' : 'view_quilt',
'children': [
{
'title' : 'Carded',
'type' : 'nav-collapse',
'children': [
{
'title': 'Full Width',
'type' : 'nav-item',
'url' : '/ui/page-layouts/carded/full-width'
},
{
'title': 'Full Width 2',
'type' : 'nav-item',
'url' : '/ui/page-layouts/carded/full-width-2'
},
{
'title': 'Left Sidenav',
'type' : 'nav-item',
'url' : '/ui/page-layouts/carded/left-sidenav'
},
{
'title': 'Left Sidenav 2',
'type' : 'nav-item',
'url' : '/ui/page-layouts/carded/left-sidenav-2'
},
{
'title': 'Right Sidenav',
'type' : 'nav-item',
'url' : '/ui/page-layouts/carded/right-sidenav'
},
{
'title': 'Right Sidenav 2',
'type' : 'nav-item',
'url' : '/ui/page-layouts/carded/right-sidenav-2'
}
]
},
{
'title' : 'Simple',
'type' : 'nav-collapse',
'children': [
{
'title': 'Full Width',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/full-width'
},
{
'title': 'Left Sidenav',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/left-sidenav'
},
{
'title': 'Left Sidenav 2',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/left-sidenav-2'
},
{
'title': 'Left Sidenav 3',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/left-sidenav-3'
},
{
'title': 'Right Sidenav',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/right-sidenav'
},
{
'title': 'Right Sidenav 2',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/right-sidenav-2'
},
{
'title': 'Right Sidenav 3',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/right-sidenav-3'
},
{
'title': 'Tabbed',
'type' : 'nav-item',
'url' : '/ui/page-layouts/simple/tabbed'
}
]
},
{
'title': 'Blank',
'type' : 'nav-item',
'url' : '/ui/page-layouts/blank'
}
]
},
{
'title': 'Colors',
'type' : 'nav-item',
'icon' : 'color_lens',
'url' : '/ui/colors'
},
{
'title': 'SERVICES',
'type' : 'subheader'
},
{
'title': 'Config',
'type' : 'nav-item',
'icon' : 'settings',
'url' : '/services/config'
},
{
'title': 'Splash Screen',
'type' : 'nav-item',
'icon' : 'settings',
'url' : '/services/splash-screen'
},
{
'title': 'COMPONENTS',
'type' : 'subheader'
},
{
'title': 'Countdown',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/countdown'
},
{
'title': 'Highlight.js',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/highlightjs'
},
{
'title': 'Material Color Picker',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/material-color-picker'
},
{
'title': 'Navigation',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/navigation'
},
{
'title': 'Price Tables',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/price-tables'
},
{
'title': 'Search Bar',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/search-bar'
},
{
'title': 'Shortcuts',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/shortcuts'
},
{
'title': 'Widget',
'type' : 'nav-item',
'icon' : 'settings_input_component',
'url' : '/components/widget'
},
{
'title': '3RD PARTY COMPONENTS',
'type' : 'subheader'
},
{
'title' : 'Datatables',
'type' : 'nav-collapse',
'icon' : 'border_all',
'children': [
{
'title': 'ngx-datatable',
'type' : 'nav-item',
'url' : '/components-third-party/datatables/ngx-datatable'
}
]
}
];
this.horizontalNavItems = [
this.model = [
{
'title' : 'Applications',
'type' : 'group',
'icon' : 'apps',
'type' : 'nav-collapse',
'children': [
{
'title' : 'Dashboards',
'type' : 'nav-collapse',
'type' : 'collapse',
'icon' : 'dashboard',
'children': [
{
'type' : 'nav-item',
'type' : 'item',
'title': 'Project',
'url' : '/apps/dashboards/project'
}
@ -417,13 +24,13 @@ export class FuseNavigation
},
{
'title': 'Calendar',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'today',
'url' : '/apps/calendar'
},
{
'title': 'Mail',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'email',
'url' : '/apps/mail',
'badge': {
@ -434,7 +41,7 @@ export class FuseNavigation
},
{
'title': 'Chat',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'chat',
'url' : '/apps/chat',
'badge': {
@ -445,19 +52,19 @@ export class FuseNavigation
},
{
'title': 'File Manager',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'folder',
'url' : '/apps/file-manager'
},
{
'title': 'Contacts',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'account_box',
'url' : '/apps/contacts'
},
{
'title': 'To-Do',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'check_box',
'url' : '/apps/todo',
'badge': {
@ -468,7 +75,7 @@ export class FuseNavigation
},
{
'title': 'Scrumboard',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'assessment',
'url' : '/apps/scrumboard'
}
@ -476,106 +83,106 @@ export class FuseNavigation
},
{
'title' : 'Pages',
'type' : 'group',
'icon' : 'pages',
'type' : 'nav-collapse',
'children': [
{
'title' : 'Authentication',
'type' : 'nav-collapse',
'type' : 'collapse',
'icon' : 'lock',
'children': [
{
'title': 'Login',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/auth/login'
},
{
'title': 'Login v2',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/auth/login-2'
},
{
'title': 'Register',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/auth/register'
},
{
'title': 'Register v2',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/auth/register-2'
},
{
'title': 'Forgot Password',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/auth/forgot-password'
},
{
'title': 'Reset Password',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/auth/reset-password'
},
{
'title': 'Lock Screen',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/auth/lock'
}
]
},
{
'title': 'Coming Soon',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'alarm',
'url' : '/pages/coming-soon'
},
{
'title' : 'Errors',
'type' : 'nav-collapse',
'type' : 'collapse',
'icon' : 'error',
'children': [
{
'title': '404',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/errors/error-404'
},
{
'title': '500',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/errors/error-500'
}
]
},
{
'title' : 'Invoice',
'type' : 'nav-collapse',
'type' : 'collapse',
'icon' : 'receipt',
'children': [
{
'title': 'Modern',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/invoices/modern'
},
{
'title': 'Compact',
'type' : 'nav-item',
'type' : 'item',
'url' : '/pages/invoices/compact'
}
]
},
{
'title': 'Maintenance',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'build',
'url' : '/pages/maintenance'
},
{
'title': 'Profile',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'person',
'url' : '/pages/profile'
},
{
'title': 'Search',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'search',
'url' : '/pages/search'
}
@ -583,130 +190,130 @@ export class FuseNavigation
},
{
'title' : 'User Interface',
'type' : 'group',
'icon' : 'web',
'type' : 'nav-collapse',
'children': [
{
'title': 'Forms',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'web_asset',
'url' : '/ui/forms'
},
{
'title': 'Icons',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'photo',
'url' : '/ui/icons'
},
{
'title': 'Typography',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'text_fields',
'url' : '/ui/typography'
},
{
'title': 'Helper Classes',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'help',
'url' : '/ui/helper-classes'
},
{
'title' : 'Page Layouts',
'type' : 'nav-collapse',
'type' : 'collapse',
'icon' : 'view_quilt',
'children': [
{
'title' : 'Carded',
'type' : 'nav-collapse',
'type' : 'collapse',
'children': [
{
'title': 'Full Width',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/carded/full-width'
},
{
'title': 'Full Width 2',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/carded/full-width-2'
},
{
'title': 'Left Sidenav',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav'
},
{
'title': 'Left Sidenav 2',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/carded/left-sidenav-2'
},
{
'title': 'Right Sidenav',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav'
},
{
'title': 'Right Sidenav 2',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/carded/right-sidenav-2'
}
]
},
{
'title' : 'Simple',
'type' : 'nav-collapse',
'type' : 'collapse',
'children': [
{
'title': 'Full Width',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/simple/full-width'
},
{
'title': 'Left Sidenav',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav'
},
{
'title': 'Left Sidenav 2',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav-2'
},
{
'title': 'Left Sidenav 3',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/simple/left-sidenav-3'
},
{
'title': 'Right Sidenav',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav'
},
{
'title': 'Right Sidenav 2',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav-2'
},
{
'title': 'Right Sidenav 3',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/simple/right-sidenav-3'
},
{
'title': 'Tabbed',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/simple/tabbed'
}
]
},
{
'title': 'Blank',
'type' : 'nav-item',
'type' : 'item',
'url' : '/ui/page-layouts/blank'
}
]
},
{
'title': 'Colors',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'color_lens',
'url' : '/ui/colors'
}
@ -714,18 +321,18 @@ export class FuseNavigation
},
{
'title' : 'Services',
'type' : 'group',
'icon' : 'settings',
'type' : 'nav-collapse',
'children': [
{
'title': 'Config',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings',
'url' : '/services/config'
},
{
'title': 'Splash Screen',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings',
'url' : '/services/splash-screen'
}
@ -733,73 +340,73 @@ export class FuseNavigation
},
{
'title' : 'Components',
'type' : 'group',
'icon' : 'settings_input_component',
'type' : 'nav-collapse',
'children': [
{
'title': 'Countdown',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/countdown'
},
{
'title': 'Highlight.js',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/highlightjs'
},
{
'title': 'Material Color Picker',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/material-color-picker'
},
{
'title': 'Navigation',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/navigation'
},
{
'title': 'Price Tables',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/price-tables'
},
{
'title': 'Search Bar',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/search-bar'
},
{
'title': 'Shortcuts',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/shortcuts'
},
{
'title': 'Widget',
'type' : 'nav-item',
'type' : 'item',
'icon' : 'settings_input_component',
'url' : '/components/widget'
},
}
]
},
{
'title' : '3rd Party components',
'type' : 'group',
'icon' : 'settings_input_component',
'children': [
{
'title' : '3rd Party components',
'icon' : 'settings_input_component',
'type' : 'nav-collapse',
'title' : 'Datatables',
'type' : 'collapse',
'icon' : 'border_all',
'children': [
{
'title' : 'Datatables',
'type' : 'nav-collapse',
'icon' : 'border_all',
'children': [
{
'title': 'ngx-datatable',
'type' : 'nav-item',
'url' : '/components-third-party/datatables/ngx-datatable'
}
]
'title': 'ngx-datatable',
'type' : 'item',
'url' : '/components-third-party/datatables/ngx-datatable'
}
]
}