Nav Collapse arrow icon and animation added

src/app/core/animations.ts

@@ -0,0 +1,11 @@
+import {trigger, state, transition, animate, style} from '@angular/animations';
+
+export class Animations
+{
+    public static slideInOut = trigger('slideInOut', [
+        state('0', style({height: '0px', display: 'none'})),
+        state('1', style({height: '*', display: 'block'})),
+        transition('1 => 0', animate('300ms ease-out')),
+        transition('0 => 1', animate('300ms ease-in'))
+    ]);
+}

src/app/navigation/nav-collapse/nav-collapse.component.html

@@ -1,8 +1,9 @@
 <a class="nav-link" md-ripple (click)="toggleOpen($event)">
-    <md-icon *ngIf="item.icon">{{item.icon}}</md-icon>
+    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
     <span>{{item.title}}</span>
+    <md-icon class="collapse-arrow">keyboard_arrow_right</md-icon>
 </a>
-<div class="children">
+<div class="children" [@slideInOut]="isOpen">
     <ng-container *ngFor="let item of item.children">
         <fuse-nav-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-item>
         <fuse-nav-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-collapse>

src/app/navigation/nav-collapse/nav-collapse.component.scss

@@ -1,12 +1,26 @@
 :host {
 
+    .nav-link {
+        .collapse-arrow {
+            transition: transform .3s ease-in-out, opacity .25s ease-in-out .1s;
+            transform: rotate(0);
+        }
+    }
+
     > .children {
-        display: none;
+        overflow: hidden;
     }
 
     &.open {
+
+        .nav-link {
+            .collapse-arrow {
+                transform: rotate(90deg);
+            }
+        }
+
         > .children {
-            display: block;
-        }
+        }
+
     }
 }

src/app/navigation/nav-collapse/nav-collapse.component.ts

@@ -1,17 +1,19 @@
 import {Component, HostBinding, Input, OnInit} from '@angular/core';
 import {NavigationService} from '../navigation.service';
 import {NavigationEnd, Router} from '@angular/router';
+import {Animations} from '../../core/animations';
 
 @Component({
     selector   : 'fuse-nav-collapse',
     templateUrl: './nav-collapse.component.html',
     styleUrls  : ['./nav-collapse.component.scss'],
+    animations : [Animations.slideInOut]
 })
 export class NavCollapseComponent implements OnInit
 {
     @Input() item: any;
     @HostBinding('class') classes = 'nav-collapse nav-item';
-    @HostBinding('class.open') private isOpen = false;
+    @HostBinding('class.open') public isOpen = false;
 
     constructor(private navigationService: NavigationService, private router: Router)
     {
@@ -75,9 +77,7 @@ export class NavCollapseComponent implements OnInit
     {
         ev.preventDefault();
         this.isOpen = !this.isOpen;
-        //  this.navigationService.onNavItemClicked.emit(this.item);
         this.navigationService.onNavCollapseToggled.emit(this.item);
-        console.log('toggleOpen');
     }
 
     /**
@@ -133,6 +133,11 @@ export class NavCollapseComponent implements OnInit
         return false;
     }
 
+    public isCollapsed(): boolean
+    {
+        return this.isOpen;
+    }
+
     ngOnInit()
     {
     }

src/app/navigation/nav-item/nav-item.component.html

@@ -1,5 +1,5 @@
 <a class="nav-link" md-ripple
    [routerLink]="[item.url]" routerLinkActive="active">
-    <md-icon *ngIf="item.icon">{{item.icon}}</md-icon>
+    <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
     <span>{{item.title}}</span>
 </a>

src/app/navigation/navigation.component.scss

@@ -27,6 +27,10 @@
             color: map_get($foreground, text);
             cursor: pointer;
 
+            > span {
+                flex: 1;
+            }
+
             &:hover {
                 background-color: map-get($background, hover);
             }
@@ -42,18 +46,22 @@
                     background-color: mat-color($accent, default-contrast, 0.1);
                 }
 
-                &, .mat-icon {
+                &, .nav-link-icon {
                     color: mat-color($accent, default-contrast);
                 }
             }
 
-            .mat-icon {
+            .nav-link-icon {
+                margin-right: 16px;
+            }
+
+            .nav-link-icon,
+            .collapse-arrow {
                 font-size: 16px;
                 width: 16px;
                 height: 16px;
                 line-height: 16px;
                 color: map_get($mat-light-theme-foreground, icon);;
-                margin-right: 16px;
             }
         }