Navigation interface

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

@@ -6,21 +6,37 @@
     </a>
 
     <!-- item.url -->
-    <a class="nav-link" *ngIf="item.url && !item.function" (click)="toggleOpen($event)"
+    <a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" (click)="toggleOpen($event)"
+       [routerLink]="[item.url]" routerLinkActive="active"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl -->
+    <a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function" (click)="toggleOpen($event)"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.function -->
+    <span class="nav-link" *ngIf="!item.url && item.function"
+          (click)="toggleOpen($event);item.function()" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </span>
+
+    <!-- item.url && item.function -->
+    <a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="toggleOpen($event);item.function()"
        [routerLink]="[item.url]" routerLinkActive="active"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
-    <!-- item.function -->
+    <!-- item.externalUrl && item.function -->
-    <span class="nav-link" *ngIf="!item.url && item.function" (click)="toggleOpen($event);item.function()" matRipple>
+    <a class="nav-link" *ngIf="item.url && item.externalUrl && item.function"
-        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+       (click)="toggleOpen($event);item.function()"
-    </span>
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
-
-    <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && item.function" (click)="toggleOpen($event);item.function()"
-       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

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';

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

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

@@ -1,21 +1,36 @@
 <ng-container *ngIf="!item.hidden">
 
     <!-- item.url -->
-    <a class="nav-link" *ngIf="item.url && !item.function"
+    <a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function"
        [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl -->
+    <a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 
     <!-- item.function -->
-    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+    <span class="nav-link" *ngIf="!item.url && item.function"
+          (click)="item.function()" matRipple>
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </span>
 
     <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
+    <a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()"
        [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl && item.function -->
+    <a class="nav-link" *ngIf="item.url && item.externalUrl && item.function" (click)="item.function()"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
         <ng-container *ngTemplateOutlet="itemContent"></ng-container>
     </a>
 

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

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[];
+}

src/@fuse/types/index.ts

@@ -1 +1,2 @@
 export * from './fuse-config';
+export * from './fuse-navigation';