From df8ea987dde29331de4f02eba5368ecdd04a7953 Mon Sep 17 00:00:00 2001
From: Andrey Ovchinnikov <ovchinnikov@users.noreply.github.com>
Date: Tue, 18 Sep 2018 14:48:33 +0300
Subject: [PATCH] Improve navigation menu (#16)

Improve navigation menu
---
 .../navigation-menu.component.html            |  2 +-
 .../navigation-menu.component.scss            | 24 ++++++++++++++-----
 .../navigation-menu.component.ts              |  3 ---
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/app/shared/components/navigation-menu/navigation-menu.component.html b/src/app/shared/components/navigation-menu/navigation-menu.component.html
index 95e4df397..3fc22b3ce 100644
--- a/src/app/shared/components/navigation-menu/navigation-menu.component.html
+++ b/src/app/shared/components/navigation-menu/navigation-menu.component.html
@@ -1,7 +1,7 @@
 <ng-content></ng-content>
 
 <dx-tree-view
-    width="12em"
+    expandEvent="click"
     [ngClass]="{ 'treeview-compact': compactMode }"
     [items]="menuItems"
     (onItemClick)="onItemSelectionChanged($event)"
diff --git a/src/app/shared/components/navigation-menu/navigation-menu.component.scss b/src/app/shared/components/navigation-menu/navigation-menu.component.scss
index cd88c417d..e4a7c3fc1 100644
--- a/src/app/shared/components/navigation-menu/navigation-menu.component.scss
+++ b/src/app/shared/components/navigation-menu/navigation-menu.component.scss
@@ -1,6 +1,7 @@
 :host {
     display: block;
     height: 100%;
+    min-width: 250px;
 
     .dx-treeview {
         white-space: nowrap;
@@ -13,19 +14,30 @@
     }
 
     .dx-treeview-item-content {
-        padding-left: 8px;
+        padding-left: 10px;
     }
 
     .dx-treeview-toggle-item-visibility {
-        right: 0;
+        right: 10px;
         left: auto;
     }
+
+    .dx-treeview-node[aria-level='1'] {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+        .dx-treeview-item-content span {
+            padding-left: 12px;
+        }
+    }
+
+    .dx-treeview-node[aria-level='2'] .dx-treeview-item-content {
+        font-weight: 300;
+        padding-left: 38px;
+    }
 }
 
 ::ng-deep .treeview-compact {
-    .dx-treeview-item-content {
-        span {
-            visibility: hidden;
-        }
+    .dx-treeview-item-content span {
+        visibility: hidden;
     }
 }
+
diff --git a/src/app/shared/components/navigation-menu/navigation-menu.component.ts b/src/app/shared/components/navigation-menu/navigation-menu.component.ts
index 400fef85e..489f8635c 100644
--- a/src/app/shared/components/navigation-menu/navigation-menu.component.ts
+++ b/src/app/shared/components/navigation-menu/navigation-menu.component.ts
@@ -44,9 +44,6 @@ export class NavigationMenuComponent {
         if (path) {
             this.selectedItemChanged.emit(event.itemData.text);
             this.router.navigate([path]);
-        } else {
-            const treeView = this.menu.instance;
-            event.node.expanded ? treeView.collapseItem(event.itemData) : treeView.expandItem(event.itemData);
         }
     }
 }