From 3d9ded9a4483132807402d8178fbafd309ce7541 Mon Sep 17 00:00:00 2001
From: mustafahlvc <mustafahlvc@gmail.com>
Date: Tue, 26 Sep 2017 11:58:34 +0300
Subject: [PATCH] Nested Group feature added to navigation

---
 .../nav-collapse/nav-horizontal-collapse.component.html  | 1 +
 .../nav-collapse/nav-vertical-collapse.component.html    | 1 +
 .../vertical/nav-group/nav-vertical-group.component.ts   | 2 +-
 src/app/core/scss/partials/_navigation.scss              | 9 +++++++++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
index 4f061e79..9fcef7d6 100644
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
+++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
@@ -11,6 +11,7 @@
         <ng-container *ngFor="let item of item.children">
             <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
             <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
         </ng-container>
 
     </div>
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
index 2c3e9647..a55711f1 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
@@ -7,5 +7,6 @@
     <ng-container *ngFor="let item of item.children">
         <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
         <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
     </ng-container>
 </div>
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
index f429b5d1..0d5e681f 100644
--- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
@@ -7,7 +7,7 @@ import { Component, HostBinding, Input, OnInit } from '@angular/core';
 })
 export class FuseNavVerticalGroupComponent implements OnInit
 {
-    @HostBinding('class') classes = 'nav-group';
+    @HostBinding('class') classes = 'nav-group nav-item';
     @Input() item: any;
 
     constructor()
diff --git a/src/app/core/scss/partials/_navigation.scss b/src/app/core/scss/partials/_navigation.scss
index 0c8e8607..af8161e2 100644
--- a/src/app/core/scss/partials/_navigation.scss
+++ b/src/app/core/scss/partials/_navigation.scss
@@ -12,6 +12,7 @@
     }
 
     .nav-group {
+        display: block;
 
         > .group-title {
             position: relative;
@@ -107,6 +108,10 @@
                         padding-left: 56px;
                     }
 
+                    &.nav-group {
+                        padding-left: 32px;
+                    }
+
                     > .children {
 
                         > .nav-item {
@@ -114,6 +119,10 @@
                             > .nav-link {
                                 padding-left: 72px;
                             }
+
+                            &.nav-group {
+                                padding-left: 48px;
+                            }
                         }
                     }
                 }