From f693298f3a0c26122a0d01b7f9673ac7461a114c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 30 May 2018 19:48:59 +0300 Subject: [PATCH] Navigation interface --- .../nav-vertical-collapse.component.html | 36 +- .../nav-vertical-collapse.component.ts | 5 +- .../nav-group/nav-vertical-group.component.ts | 4 +- .../nav-item/nav-vertical-item.component.html | 25 +- .../nav-item/nav-vertical-item.component.ts | 4 +- src/@fuse/types/fuse-navigation.ts | 26 + src/@fuse/types/index.ts | 1 + src/app/navigation/navigation.ts | 1272 +++++++++-------- 8 files changed, 719 insertions(+), 654 deletions(-) create mode 100644 src/@fuse/types/fuse-navigation.ts diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html index ef09b5e9..dca833e8 100644 --- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html +++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html @@ -6,21 +6,37 @@ - + + + + + + + + + + + + + + + - - - - - - - + + diff --git a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts index ad046c1f..8ef02be0 100644 --- a/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts @@ -3,8 +3,9 @@ import { NavigationEnd, Router } from '@angular/router'; import { Subject } from 'rxjs'; import { filter, takeUntil } from 'rxjs/operators'; -import { FuseNavigationService } from '../../navigation.service'; +import { FuseNavigationItem } from '@fuse/types'; import { fuseAnimations } from '@fuse/animations'; +import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; @Component({ selector : 'fuse-nav-vertical-collapse', @@ -15,7 +16,7 @@ import { fuseAnimations } from '@fuse/animations'; export class FuseNavVerticalCollapseComponent implements OnInit, OnDestroy { @Input() - item: any; + item: FuseNavigationItem; @HostBinding('class') classes = 'nav-collapse nav-item'; diff --git a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts index 8ec510e2..0959e39d 100644 --- a/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.ts @@ -1,5 +1,7 @@ import { Component, HostBinding, Input } from '@angular/core'; +import { FuseNavigationItem } from '@fuse/types'; + @Component({ selector : 'fuse-nav-vertical-group', templateUrl: './nav-vertical-group.component.html', @@ -11,7 +13,7 @@ export class FuseNavVerticalGroupComponent classes = 'nav-group nav-item'; @Input() - item: any; + item: FuseNavigationItem; /** * Constructor diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html index f4de0858..0363aaa6 100644 --- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html +++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html @@ -1,21 +1,36 @@ - + [routerLinkActiveOptions]="{exact: item.exactMatch || false}" + [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> + + + + + - + - + [routerLinkActiveOptions]="{exact: item.exactMatch || false}" + [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> + + + + + diff --git a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts index 481628c0..9fe5c36c 100644 --- a/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts +++ b/src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.ts @@ -1,5 +1,7 @@ import { Component, HostBinding, Input } from '@angular/core'; +import { FuseNavigationItem } from '@fuse/types'; + @Component({ selector : 'fuse-nav-vertical-item', templateUrl: './nav-vertical-item.component.html', @@ -11,7 +13,7 @@ export class FuseNavVerticalItemComponent classes = 'nav-item'; @Input() - item: any; + item: FuseNavigationItem; /** * Constructor diff --git a/src/@fuse/types/fuse-navigation.ts b/src/@fuse/types/fuse-navigation.ts new file mode 100644 index 00000000..cb915e1e --- /dev/null +++ b/src/@fuse/types/fuse-navigation.ts @@ -0,0 +1,26 @@ +export interface FuseNavigationItem +{ + id: string; + title: string; + type: 'item' | 'group' | 'collapse'; + translate?: string; + icon?: string; + hidden?: boolean; + url?: string; + exactMatch?: boolean; + externalUrl?: boolean; + openInNewTab?: boolean; + function?: any; + badge?: { + title?: string; + translate?: string; + bg?: string; + fg?: string; + }; + children?: FuseNavigationItem[]; +} + +export interface FuseNavigation extends FuseNavigationItem +{ + children?: FuseNavigationItem[]; +} diff --git a/src/@fuse/types/index.ts b/src/@fuse/types/index.ts index f47ab6aa..50ed6d77 100644 --- a/src/@fuse/types/index.ts +++ b/src/@fuse/types/index.ts @@ -1 +1,2 @@ export * from './fuse-config'; +export * from './fuse-navigation'; diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index 63427768..bfd12d41 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -1,935 +1,937 @@ -export const navigation = [ +import { FuseNavigation } from '@fuse/types'; + +export const navigation: FuseNavigation[] = [ { - 'id' : 'applications', - 'title' : 'Applications', - 'translate': 'NAV.APPLICATIONS', - 'type' : 'group', - 'icon' : 'apps', - 'children' : [ + 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 : 'dashboards', + title : 'Dashboards', + translate: 'NAV.DASHBOARDS', + type : 'collapse', + icon : 'dashboard', + children : [ { - 'id' : 'analytics', - 'title': 'Analytics', - 'type' : 'item', - 'url' : '/apps/dashboards/analytics' + id : 'analytics', + title: 'Analytics', + type : 'item', + url : '/apps/dashboards/analytics' }, { - 'id' : 'project', - 'title': 'Project', - 'type' : 'item', - 'url' : '/apps/dashboards/project' + 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 : '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 : '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 : 'dashboard', + title: 'Dashboard', + type : 'item', + url : '/apps/e-commerce/dashboard' }, { - 'id' : 'products', - 'title' : 'Products', - 'type' : 'item', - 'url' : '/apps/e-commerce/products', - 'exactMatch': true + 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 : '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 : '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 : '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 : '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', + 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 : '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 : '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 : '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 : '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 : '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 : 'scrumboard', + title : 'Scrumboard', + translate: 'NAV.SCRUMBOARD', + type : 'item', + icon : 'assessment', + url : '/apps/scrumboard' } ] }, { - 'id' : 'pages', - 'title' : 'Pages', - 'type' : 'group', - 'icon' : 'pages', - 'children': [ + id : 'pages', + title : 'Pages', + type : 'group', + icon : 'pages', + children: [ { - 'id' : 'authentication', - 'title' : 'Authentication', - 'type' : 'collapse', - 'icon' : 'lock', - 'badge' : { - 'title': 10, - 'bg' : '#525e8a', - 'fg' : '#FFFFFF' + id : 'authentication', + title : 'Authentication', + type : 'collapse', + icon : 'lock', + badge : { + title: '10', + bg : '#525e8a', + fg : '#FFFFFF' }, - 'children': [ + children: [ { - 'id' : 'login', - 'title': 'Login', - 'type' : 'item', - 'url' : '/pages/auth/login' + id : 'login', + title: 'Login', + type : 'item', + url : '/pages/auth/login' }, { - 'id' : 'login-v2', - 'title': 'Login v2', - 'type' : 'item', - 'url' : '/pages/auth/login-2' + 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', + title: 'Register', + type : 'item', + url : '/pages/auth/register' }, { - 'id' : 'register-v2', - 'title': 'Register v2', - 'type' : 'item', - 'url' : '/pages/auth/register-2' + 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', + 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 : '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', + 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 : '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 : '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 : '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 : 'coming-soon', + title: 'Coming Soon', + type : 'item', + icon : 'alarm', + url : '/pages/coming-soon' }, { - 'id' : 'errors', - 'title' : 'Errors', - 'type' : 'collapse', - 'icon' : 'error', - 'children': [ + id : 'errors', + title : 'Errors', + type : 'collapse', + icon : 'error', + children: [ { - 'id' : '404', - 'title': '404', - 'type' : 'item', - 'url' : '/pages/errors/error-404' + id : '404', + title: '404', + type : 'item', + url : '/pages/errors/error-404' }, { - 'id' : '500', - 'title': '500', - 'type' : 'item', - 'url' : '/pages/errors/error-500' + id : '500', + title: '500', + type : 'item', + url : '/pages/errors/error-500' } ] }, { - 'id' : 'invoice', - 'title' : 'Invoice', - 'type' : 'collapse', - 'icon' : 'receipt', - 'children': [ + id : 'invoice', + title : 'Invoice', + type : 'collapse', + icon : 'receipt', + children: [ { - 'id' : 'modern', - 'title': 'Modern', - 'type' : 'item', - 'url' : '/pages/invoices/modern' + id : 'modern', + title: 'Modern', + type : 'item', + url : '/pages/invoices/modern' }, { - 'id' : 'compact', - 'title': 'Compact', - 'type' : 'item', - 'url' : '/pages/invoices/compact' + id : 'compact', + title: 'Compact', + type : 'item', + url : '/pages/invoices/compact' } ] }, { - 'id' : 'maintenance', - 'title': 'Maintenance', - 'type' : 'item', - 'icon' : 'build', - 'url' : '/pages/maintenance' + id : 'maintenance', + title: 'Maintenance', + type : 'item', + icon : 'build', + url : '/pages/maintenance' }, { - 'id' : 'pricing', - 'title' : 'Pricing', - 'type' : 'collapse', - 'icon' : 'attach_money', - 'children': [ + 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-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-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 : 'style-3', + title: 'Style 3', + type : 'item', + url : '/pages/pricing/style-3' } ] }, { - 'id' : 'profile', - 'title': 'Profile', - 'type' : 'item', - 'icon' : 'person', - 'url' : '/pages/profile' + id : 'profile', + title: 'Profile', + type : 'item', + icon : 'person', + url : '/pages/profile' }, { - 'id' : 'search', - 'title': 'Search', - 'type' : 'item', - 'icon' : 'search', - 'url' : '/pages/search' + id : 'search', + title: 'Search', + type : 'item', + icon : 'search', + url : '/pages/search' }, { - 'id' : 'faq', - 'title': 'Faq', - 'type' : 'item', - 'icon' : 'help', - 'url' : '/pages/faq' + id : 'faq', + title: 'Faq', + type : 'item', + icon : 'help', + url : '/pages/faq' }, { - 'id' : 'knowledge-base', - 'title': 'Knowledge Base', - 'type' : 'item', - 'icon' : 'import_contacts', - 'url' : '/pages/knowledge-base' + id : 'knowledge-base', + title: 'Knowledge Base', + type : 'item', + icon : 'import_contacts', + url : '/pages/knowledge-base' } ] }, { - 'id' : 'user-interface', - 'title' : 'User Interface', - 'type' : 'group', - 'icon' : 'web', - 'children': [ + id : 'user-interface', + title : 'User Interface', + type : 'group', + icon : 'web', + children: [ { - 'id' : 'forms', - 'title': 'Forms', - 'type' : 'item', - 'icon' : 'web_asset', - 'url' : '/ui/forms' + id : 'forms', + title: 'Forms', + type : 'item', + icon : 'web_asset', + url : '/ui/forms' }, { - 'id' : 'icons', - 'title': 'Icons', - 'type' : 'item', - 'icon' : 'photo', - 'url' : '/ui/icons' + id : 'icons', + title: 'Icons', + type : 'item', + icon : 'photo', + url : '/ui/icons' }, { - 'id' : 'typography', - 'title': 'Typography', - 'type' : 'item', - 'icon' : 'text_fields', - 'url' : '/ui/typography' + 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 : '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 : 'page-layouts', + title : 'Page Layouts', + type : 'collapse', + icon : 'view_quilt', + children: [ { - 'id' : 'carded', - 'title' : 'Carded', - 'type' : 'collapse', - 'badge' : { - 'title': 10, - 'bg' : '#525e8a', - 'fg' : '#FFFFFF' + id : 'carded', + title : 'Carded', + type : 'collapse', + badge : { + title: '10', + bg : '#525e8a', + fg : '#FFFFFF' }, - 'children': [ + children: [ { - 'id' : 'full-width', - 'title': 'Full Width', - 'type' : 'item', - 'url' : '/ui/page-layouts/carded/full-width' + 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 : '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', + 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-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', + 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 : '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', + 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-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', + 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 : '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' + id : 'simple', + title : 'Simple', + type : 'collapse', + badge : { + title: '8', + bg : '#525e8a', + fg : '#FFFFFF' }, - 'children': [ + children: [ { - 'id' : 'full-width', - 'title': 'Full Width', - 'type' : 'item', - 'url' : '/ui/page-layouts/simple/full-width' + 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', + 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-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 : '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', + 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-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 : '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 : 'tabbed', + title: 'Tabbed', + type : 'item', + url : '/ui/page-layouts/simple/tabbed' } ] }, { - 'id' : 'blank', - 'title': 'Blank', - 'type' : 'item', - 'url' : '/ui/page-layouts/blank' + id : 'blank', + title: 'Blank', + type : 'item', + url : '/ui/page-layouts/blank' } ] }, { - 'id' : 'colors', - 'title': 'Colors', - 'type' : 'item', - 'icon' : 'color_lens', - 'url' : '/ui/colors' + id : 'colors', + title: 'Colors', + type : 'item', + icon : 'color_lens', + url : '/ui/colors' } ] }, { - 'id' : 'services', - 'title' : 'Services', - 'type' : 'group', - 'icon' : 'settings', - 'children': [ + id : 'services', + title : 'Services', + type : 'group', + icon : 'settings', + children: [ { - 'id' : 'config', - 'title': 'Config', - 'type' : 'item', - 'icon' : 'settings', - 'url' : '/services/config' + 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 : '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 : 'components', + title : 'Components', + type : 'group', + icon : 'settings_input_component', + children: [ { - 'id' : 'angular-material-elements', - 'title' : 'Angular Material Elements', - 'type' : 'collapse', - 'icon' : 'layers', - 'children': [ + id : 'angular-material-elements', + title : 'Angular Material Elements', + type : 'collapse', + icon : 'layers', + children: [ { - 'id' : 'form-controls', - 'title' : 'Form Controls', - 'type' : 'group', - 'children': [ + id : 'form-controls', + title : 'Form Controls', + type : 'group', + children: [ { - 'id' : 'autocomplete', - 'title': 'Autocomplete', - 'type' : 'item', - 'url' : '/components/angular-material/autocomplete' + id : 'autocomplete', + title: 'Autocomplete', + type : 'item', + url : '/components/angular-material/autocomplete' }, { - 'id' : 'checkbox', - 'title': 'Checkbox', - 'type' : 'item', - 'url' : '/components/angular-material/checkbox' + id : 'checkbox', + title: 'Checkbox', + type : 'item', + url : '/components/angular-material/checkbox' }, { - 'id' : 'datepicker', - 'title': 'Datepicker', - 'type' : 'item', - 'url' : '/components/angular-material/datepicker' + 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 : '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 : '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 : '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 : 'select', + title: 'Select', + type : 'item', + url : '/components/angular-material/select' }, { - 'id' : 'slider', - 'title': 'Slider', - 'type' : 'item', - 'url' : '/components/angular-material/slider' + 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 : 'slide-toggle', + title: 'Slide toggle', + type : 'item', + url : '/components/angular-material/slide-toggle' } ] }, { - 'id' : 'navigation', - 'title' : 'Navigation', - 'type' : 'group', - 'children': [ + id : 'navigation', + title : 'Navigation', + type : 'group', + children: [ { - 'id' : 'menu', - 'title': 'Menu', - 'type' : 'item', - 'url' : '/components/angular-material/menu' + id : 'menu', + title: 'Menu', + type : 'item', + url : '/components/angular-material/menu' }, { - 'id' : 'sidenav', - 'title': 'Sidenav', - 'type' : 'item', - 'url' : '/components/angular-material/sidenav' + id : 'sidenav', + title: 'Sidenav', + type : 'item', + url : '/components/angular-material/sidenav' }, { - 'id' : 'toolbar', - 'title': 'Toolbar', - 'type' : 'item', - 'url' : '/components/angular-material/toolbar' + id : 'toolbar', + title: 'Toolbar', + type : 'item', + url : '/components/angular-material/toolbar' } ] }, { - 'id' : 'layout', - 'title' : 'Layout', - 'type' : 'group', - 'children': [ + id : 'layout', + title : 'Layout', + type : 'group', + children: [ { - 'id' : 'badge', - 'title': 'Badge', - 'type' : 'item', - 'url' : '/components/angular-material/badge' + id : 'badge', + title: 'badge', + type : 'item', + url : '/components/angular-material/badge' }, { - 'id' : 'bottom-sheet', - 'title': 'Bottom Sheet', - 'type' : 'item', - 'url' : '/components/angular-material/bottom-sheet' + id : 'bottom-sheet', + title: 'Bottom Sheet', + type : 'item', + url : '/components/angular-material/bottom-sheet' }, { - 'id' : 'card', - 'title': 'Card', - 'type' : 'item', - 'url' : '/components/angular-material/card' + id : 'card', + title: 'Card', + type : 'item', + url : '/components/angular-material/card' }, { - 'id' : 'divider', - 'title': 'Divider', - 'type' : 'item', - 'url' : '/components/angular-material/divider' + id : 'divider', + title: 'Divider', + type : 'item', + url : '/components/angular-material/divider' }, { - 'id' : 'elevation', - 'title': 'Elevation', - 'type' : 'item', - 'url' : '/components/angular-material/elevation' + 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 : 'expansion-panel', + title: 'Expansion Panel', + type : 'item', + url : '/components/angular-material/expansion-panel' }, { - 'id' : 'grid-list', - 'title': 'Grid list', - 'type' : 'item', - 'url' : '/components/angular-material/grid-list' + id : 'grid-list', + title: 'Grid list', + type : 'item', + url : '/components/angular-material/grid-list' }, { - 'id' : 'list', - 'title': 'List', - 'type' : 'item', - 'url' : '/components/angular-material/list' + id : 'list', + title: 'List', + type : 'item', + url : '/components/angular-material/list' }, { - 'id' : 'stepper', - 'title': 'Stepper', - 'type' : 'item', - 'url' : '/components/angular-material/stepper' + id : 'stepper', + title: 'Stepper', + type : 'item', + url : '/components/angular-material/stepper' }, { - 'id' : 'tabs', - 'title': 'Tabs', - 'type' : 'item', - 'url' : '/components/angular-material/tabs' + id : 'tabs', + title: 'Tabs', + type : 'item', + url : '/components/angular-material/tabs' } ] }, { - 'id' : 'buttons-indicators', - 'title' : 'Buttons & Indicators', - 'type' : 'group', - 'children': [ + id : 'buttons-indicators', + title : 'Buttons & Indicators', + type : 'group', + children: [ { - 'id' : 'button', - 'title': 'Button', - 'type' : 'item', - 'url' : '/components/angular-material/button' + 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 : '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 : 'chips', + title: 'Chips', + type : 'item', + url : '/components/angular-material/chips' }, { - 'id' : 'icon', - 'title': 'Icon', - 'type' : 'item', - 'url' : '/components/angular-material/icon' + 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-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 : 'progress-bar', + title: 'Progress bar', + type : 'item', + url : '/components/angular-material/progress-bar' } ] }, { - 'id' : 'popups-modals', - 'title' : 'Popups & Modals', - 'type' : 'group', - 'children': [ + id : 'popups-modals', + title : 'Popups & Modals', + type : 'group', + children: [ { - 'id' : 'dialog', - 'title': 'Dialog', - 'type' : 'item', - 'url' : '/components/angular-material/dialog' + id : 'dialog', + title: 'Dialog', + type : 'item', + url : '/components/angular-material/dialog' }, { - 'id' : 'snackbar', - 'title': 'Snackbar', - 'type' : 'item', - 'url' : '/components/angular-material/snackbar' + id : 'snackbar', + title: 'Snackbar', + type : 'item', + url : '/components/angular-material/snackbar' }, { - 'id' : 'tooltip', - 'title': 'Tooltip', - 'type' : 'item', - 'url' : '/components/angular-material/tooltip' + id : 'tooltip', + title: 'Tooltip', + type : 'item', + url : '/components/angular-material/tooltip' } ] }, { - 'id' : 'data-table', - 'title' : 'Data table', - 'type' : 'group', - 'children': [ + id : 'data-table', + title : 'Data table', + type : 'group', + children: [ { - 'id' : 'paginator', - 'title': 'Paginator', - 'type' : 'item', - 'url' : '/components/angular-material/paginator' + id : 'paginator', + title: 'Paginator', + type : 'item', + url : '/components/angular-material/paginator' }, { - 'id' : 'sort-header', - 'title': 'Sort header', - 'type' : 'item', - 'url' : '/components/angular-material/sort-header' + id : 'sort-header', + title: 'Sort header', + type : 'item', + url : '/components/angular-material/sort-header' }, { - 'id' : 'table', - 'title': 'Table', - 'type' : 'item', - 'url' : '/components/angular-material/table' + id : 'table', + title: 'Table', + type : 'item', + url : '/components/angular-material/table' } ] }, { - 'id' : 'tree', - 'title': 'Tree', - 'type' : 'item', - 'url' : '/components/angular-material/tree' + id : 'tree', + title: 'Tree', + type : 'item', + url : '/components/angular-material/tree' } ] }, { - 'id' : 'cards', - 'title': 'Cards', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/cards' + 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 : '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 : '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 : '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 : '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 : '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 : 'search-bar', + title: 'Search Bar', + type : 'item', + icon : 'settings_input_component', + url : '/components/search-bar' }, { - 'id' : 'sidebar', - 'title': 'Sidebar', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/sidebar' + id : 'sidebar', + title: 'Sidebar', + type : 'item', + icon : 'settings_input_component', + url : '/components/sidebar' }, { - 'id' : 'shortcuts', - 'title': 'Shortcuts', - 'type' : 'item', - 'icon' : 'settings_input_component', - 'url' : '/components/shortcuts' + 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 : '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 : '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 : 'datatables', + title : 'Datatables', + type : 'collapse', + icon : 'border_all', + children: [ { - 'id' : 'ngxdatatable', - 'title': 'ngx-datatable', - 'type' : 'item', - 'url' : '/components-third-party/datatables/ngx-datatable' + 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' + id : 'google-maps', + title: 'Google Maps', + type : 'item', + icon : 'place', + url : '/components-third-party/google-maps' } ] }