diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html index c3c95b34..559fe6a3 100644 --- a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html +++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html @@ -1,6 +1,17 @@ - + {{item.icon}} {{item.title}} - {{item.badge.title}} - \ No newline at end of file + + {{item.badge.title}} + + + + + {{item.icon}} + {{item.title}} + + {{item.badge.title}} + + \ No newline at end of file diff --git a/src/app/core/components/navigation/navigation.service.ts b/src/app/core/components/navigation/navigation.service.ts index ea175313..6dbe6c86 100644 --- a/src/app/core/components/navigation/navigation.service.ts +++ b/src/app/core/components/navigation/navigation.service.ts @@ -19,6 +19,7 @@ export class FuseNavigationService /** * Get navigation model + * * @returns {any[]} */ getNavigationModel() @@ -28,15 +29,125 @@ export class FuseNavigationService /** * 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 diff --git a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html index 443dd326..97a706fd 100644 --- a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html +++ b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html @@ -1,6 +1,17 @@ - + {{item.icon}} {{item.title}} - {{item.badge.title}} + + {{item.badge.title}} + + + + {{item.icon}} + {{item.title}} + + {{item.badge.title}} + + diff --git a/src/app/main/content/components/navigation/navigation.component.html b/src/app/main/content/components/navigation/navigation.component.html index 5b9e7e15..1b4f66df 100644 --- a/src/app/main/content/components/navigation/navigation.component.html +++ b/src/app/main/content/components/navigation/navigation.component.html @@ -21,13 +21,6 @@ navigation.

- -

Usage

@@ -55,15 +48,15 @@ @@ -76,16 +69,16 @@ @@ -98,16 +91,113 @@

+
+ +

Examples

+ +

Update navigation item on-the-fly

+ +

+ + + +

+ +
+ + + +
+ +

Add a subitem to the Calendar nav item

+ +

+ + + +

+ +
+ + + +
+ +

Add a nav item with custom function

+ +

+ + + +

+ +
+ + + +
+ +
+ + diff --git a/src/app/main/content/components/navigation/navigation.component.ts b/src/app/main/content/components/navigation/navigation.component.ts index d84d70d5..1f549a4e 100644 --- a/src/app/main/content/components/navigation/navigation.component.ts +++ b/src/app/main/content/components/navigation/navigation.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { FuseNavigationService } from '../../../../core/components/navigation/navigation.service'; @Component({ selector : 'fuse-navigation-docs', @@ -7,8 +8,50 @@ import { Component } from '@angular/core'; }) export class FuseNavigationDocsComponent { - constructor() + constructor(private navigationService: FuseNavigationService) { } + + updateMailBadge() + { + // Get the mail nav item + const mailNavItem = this.navigationService.getNavigationItem('applications.mail'); + + // Update the badge title + mailNavItem.badge.title = 35; + } + + addSubitemToCalendar() + { + // Prepare the new nav item + const newNavItem = { + id : 'sub-item', + title: 'Sub Item', + type : 'item', + url : '/apps/calendar' + }; + + // Add the new nav item + this.navigationService.addNavigationItem('applications.calendar', newNavItem); + } + + addNavItemWithCustomFunction() + { + // Prepare the new nav item + const newNavItem = { + id : 'custom-item', + title : 'Custom Item', + type : 'item', + function: () => { + alert('Custom function!'); + } + }; + + // Get the applications nav item + const applicationsNavItem = this.navigationService.getNavigationItem('applications'); + + // Add the new nav item at the beginning of the applications + applicationsNavItem.children.unshift(newNavItem); + } } diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts index e801539d..cf4129a5 100644 --- a/src/app/navigation.model.ts +++ b/src/app/navigation.model.ts @@ -6,29 +6,34 @@ export class NavigationModel { this.model = [ { + 'id' : 'applications', 'title' : 'Applications', 'type' : 'group', 'icon' : 'apps', 'children': [ { + 'id' : 'dashboards', 'title' : 'Dashboards', 'type' : 'collapse', 'icon' : 'dashboard', 'children': [ { - 'type' : 'item', + 'id' : 'project', 'title': 'Project', + 'type' : 'item', 'url' : '/apps/dashboards/project' } ] }, { + 'id' : 'calendar', 'title': 'Calendar', 'type' : 'item', 'icon' : 'today', 'url' : '/apps/calendar' }, { + 'id' : 'mail', 'title': 'Mail', 'type' : 'item', 'icon' : 'email', @@ -40,6 +45,7 @@ export class NavigationModel } }, { + 'id' : 'chat', 'title': 'Chat', 'type' : 'item', 'icon' : 'chat', @@ -51,18 +57,21 @@ export class NavigationModel } }, { + 'id' : 'file-manager', 'title': 'File Manager', 'type' : 'item', 'icon' : 'folder', 'url' : '/apps/file-manager' }, { + 'id' : 'contacts', 'title': 'Contacts', 'type' : 'item', 'icon' : 'account_box', 'url' : '/apps/contacts' }, { + 'id' : 'to-do', 'title': 'To-Do', 'type' : 'item', 'icon' : 'check_box', @@ -74,6 +83,7 @@ export class NavigationModel } }, { + 'id' : 'scrumboard', 'title': 'Scrumboard', 'type' : 'item', 'icon' : 'assessment', @@ -82,61 +92,73 @@ export class NavigationModel ] }, { + 'id' : 'pages', 'title' : 'Pages', 'type' : 'group', 'icon' : 'pages', 'children': [ { + 'id' : 'authentication', 'title' : 'Authentication', 'type' : 'collapse', 'icon' : 'lock', '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' @@ -144,22 +166,26 @@ export class NavigationModel ] }, { + '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' @@ -167,16 +193,19 @@ export class NavigationModel ] }, { + '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' @@ -184,27 +213,32 @@ export class NavigationModel ] }, { + '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' @@ -212,12 +246,14 @@ export class NavigationModel ] }, { + 'id' : 'profile', 'title': 'Profile', 'type' : 'item', 'icon' : 'person', 'url' : '/pages/profile' }, { + 'id' : 'search', 'title': 'Search', 'type' : 'item', 'icon' : 'search', @@ -226,69 +262,82 @@ export class NavigationModel ] }, { + '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', '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-2', 'title': 'Left Sidenav 2', 'type' : 'item', 'url' : '/ui/page-layouts/carded/left-sidenav-2' }, { + 'id' : 'right-sidenav', 'title': 'Right Sidenav', 'type' : 'item', 'url' : '/ui/page-layouts/carded/right-sidenav' }, { + 'id' : 'right-sidenav-2', 'title': 'Right Sidenav 2', 'type' : 'item', 'url' : '/ui/page-layouts/carded/right-sidenav-2' @@ -296,45 +345,54 @@ export class NavigationModel ] }, { + 'id' : 'simple', 'title' : 'Simple', 'type' : 'collapse', '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' @@ -342,6 +400,7 @@ export class NavigationModel ] }, { + 'id' : 'blank', 'title': 'Blank', 'type' : 'item', 'url' : '/ui/page-layouts/blank' @@ -349,6 +408,7 @@ export class NavigationModel ] }, { + 'id' : 'colors', 'title': 'Colors', 'type' : 'item', 'icon' : 'color_lens', @@ -357,17 +417,20 @@ export class NavigationModel ] }, { + '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', @@ -376,60 +439,72 @@ export class NavigationModel ] }, { + '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' @@ -437,20 +512,24 @@ export class NavigationModel ] }, { + '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' @@ -458,35 +537,42 @@ export class NavigationModel ] }, { + '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' : 'expansion-panel', 'title': 'Expansion Panel', 'type' : 'item', 'url' : '/components/angular-material/expansion-panel' @@ -494,35 +580,42 @@ export class NavigationModel ] }, { + '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' @@ -530,20 +623,24 @@ export class NavigationModel ] }, { + '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' @@ -551,20 +648,24 @@ export class NavigationModel ] }, { + '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' @@ -574,42 +675,49 @@ export class NavigationModel ] }, { + 'id' : 'countdown', 'title': 'Countdown', 'type' : 'item', 'icon' : 'settings_input_component', 'url' : '/components/countdown' }, { + 'id' : 'highlightjs', 'title': 'Highlight.js', 'type' : 'item', 'icon' : 'settings_input_component', 'url' : '/components/highlightjs' }, { + 'id' : 'material-color-picker', 'title': 'Material Color Picker', 'type' : 'item', 'icon' : 'settings_input_component', 'url' : '/components/material-color-picker' }, { + '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', @@ -618,16 +726,19 @@ export class NavigationModel ] }, { + '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' @@ -635,6 +746,7 @@ export class NavigationModel ] }, { + 'id' : 'google-maps', 'title': 'Google Maps', 'type' : 'item', 'icon' : 'place',