mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Making navigation better
This commit is contained in:
mustafahlvc
parent
e98e37402a
commit
b7ef64154d
|
|
@ -1,5 +1,6 @@
|
|||
import {Component, HostBinding, HostListener, Input, OnInit} from '@angular/core';
|
||||
import {Component, HostBinding, Input, OnInit} from '@angular/core';
|
||||
import {NavigationService} from '../navigation.service';
|
||||
import {NavigationEnd, Router} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-collapse',
|
||||
|
|
@ -10,36 +11,127 @@ export class NavCollapseComponent implements OnInit
|
|||
{
|
||||
@Input() item: any;
|
||||
@HostBinding('class') classes = 'nav-collapse nav-item';
|
||||
@HostBinding('class.open') public isOpen = false;
|
||||
@HostBinding('class.open') private isOpen = false;
|
||||
|
||||
constructor(private navigationService: NavigationService)
|
||||
constructor(private navigationService: NavigationService, private router: Router)
|
||||
{
|
||||
this.navigationService.navItemClicked.subscribe(
|
||||
(instance) =>
|
||||
/**
|
||||
* When navigation changed
|
||||
*/
|
||||
router.events.subscribe(
|
||||
(event) =>
|
||||
{
|
||||
// console.warn('navItemClicked', instance);
|
||||
|
||||
if ( !instance.includes(this.item.url) && this.isOpen )
|
||||
if ( event instanceof NavigationEnd )
|
||||
{
|
||||
this.isOpen = !this.isOpen;
|
||||
/**
|
||||
* Check if the url is child of the collapse
|
||||
*/
|
||||
if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
|
||||
{
|
||||
this.expand();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.collapse();
|
||||
}
|
||||
}
|
||||
console.warn(this.item.url, instance);
|
||||
if ( instance.includes(this.item.url) && !this.isOpen )
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Whenever a navigaiton collapse item toggled
|
||||
*/
|
||||
this.navigationService.onNavCollapseToggled.subscribe(
|
||||
(clickedItem) =>
|
||||
{
|
||||
if ( clickedItem.children )
|
||||
{
|
||||
this.isOpen = !this.isOpen;
|
||||
/**
|
||||
* if clicked collapse is child of this collapse
|
||||
* return
|
||||
*/
|
||||
if ( this.item.children.indexOf(clickedItem) !== -1 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
/**
|
||||
* If collapsed item is not related with this collapse
|
||||
* collapse
|
||||
*/
|
||||
if ( this.item !== clickedItem )
|
||||
{
|
||||
this.collapse();
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
toggleOpen(event)
|
||||
/**
|
||||
* Toggle Collapse
|
||||
* @param ev
|
||||
*/
|
||||
toggleOpen(ev)
|
||||
{
|
||||
event.preventDefault();
|
||||
ev.preventDefault();
|
||||
this.isOpen = !this.isOpen;
|
||||
this.navigationService.navItemClicked.emit(this.item.url);
|
||||
// this.navigationService.onNavItemClicked.emit(this.item);
|
||||
this.navigationService.onNavCollapseToggled.emit(this.item);
|
||||
console.log('toggleOpen');
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand
|
||||
*/
|
||||
expand()
|
||||
{
|
||||
if ( this.isOpen )
|
||||
{
|
||||
return;
|
||||
}
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Collapse
|
||||
*/
|
||||
collapse()
|
||||
{
|
||||
if ( !this.isOpen )
|
||||
{
|
||||
return;
|
||||
}
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checking the url is in children
|
||||
* @param arr
|
||||
* @param url
|
||||
* @returns {any}
|
||||
*/
|
||||
isUrlInChildren(arr, url)
|
||||
{
|
||||
if ( !arr.children )
|
||||
{
|
||||
return false;
|
||||
}
|
||||
for ( let i = 0; i < arr.children.length; i++ )
|
||||
{
|
||||
if ( arr.children[i].children )
|
||||
{
|
||||
return this.isUrlInChildren(arr.children[i], url)
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( arr.children[i].url === url )
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<a class="nav-link" md-ripple
|
||||
[routerLink]="[item.url]" routerLinkActive="active"
|
||||
(click)="onClick()">
|
||||
[routerLink]="[item.url]" routerLinkActive="active">
|
||||
<md-icon *ngIf="item.icon">{{item.icon}}</md-icon>
|
||||
<span>{{item.title}}</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import {Component, EventEmitter, HostBinding, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
|
||||
import {NavigationService} from '../navigation.service';
|
||||
import {Component, HostBinding, Input, OnInit} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-item',
|
||||
|
|
@ -11,17 +10,11 @@ export class NavItemComponent implements OnInit
|
|||
@HostBinding('class') classes = 'nav-item';
|
||||
@Input() item: any;
|
||||
|
||||
constructor(private navigationService: NavigationService)
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
onClick()
|
||||
{
|
||||
console.log('clicked');
|
||||
this.navigationService.navItemClicked.emit(this.item.url);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,415 +1,410 @@
|
|||
export class FuseNavigation
|
||||
{
|
||||
items = [
|
||||
{
|
||||
'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' : '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/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'
|
||||
}
|
||||
];
|
||||
public items: any[];
|
||||
|
||||
constructor()
|
||||
{
|
||||
this.items = [
|
||||
{
|
||||
'title': 'APPS',
|
||||
'type' : 'subheader'
|
||||
},
|
||||
{
|
||||
'title' : 'Dashboards',
|
||||
'type' : 'nav-collapse',
|
||||
'icon' : 'dashboard',
|
||||
'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',
|
||||
'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',
|
||||
'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',
|
||||
'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',
|
||||
'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',
|
||||
'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',
|
||||
'children': [
|
||||
{
|
||||
'title' : 'Carded',
|
||||
'type' : 'nav-collapse',
|
||||
'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',
|
||||
'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/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',
|
||||
'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'
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,15 @@
|
|||
import {EventEmitter, Injectable} from '@angular/core';
|
||||
import {NavigationEnd, NavigationStart, Router} from '@angular/router';
|
||||
import {FuseNavigation} from './navigation.model';
|
||||
|
||||
@Injectable()
|
||||
export class NavigationService
|
||||
{
|
||||
navItemClicked = new EventEmitter<any>();
|
||||
clickedItemUrl: string;
|
||||
onNavCollapseToggled = new EventEmitter<any>();
|
||||
navigation: object[];
|
||||
|
||||
constructor(private router: Router)
|
||||
constructor()
|
||||
{
|
||||
this.navigation = new FuseNavigation().items;
|
||||
router.events.subscribe(
|
||||
(event) =>
|
||||
{
|
||||
if ( event instanceof NavigationEnd )
|
||||
{
|
||||
console.warn('event', event);
|
||||
this.navItemClicked.emit(event.urlAfterRedirects);
|
||||
}
|
||||
}
|
||||
);
|
||||
this.navItemClicked.subscribe(
|
||||
(instance) =>
|
||||
{
|
||||
console.log('instance', instance);
|
||||
this.clickedItemUrl = instance;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getNavigation()
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user