Improve navigation menu (DevExpress#16)

Improve navigation menu
marcwittke · Sep 18, 2018 · df8ea98 · df8ea98
1 parent 0169c11
commit df8ea98
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 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
@@ -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
@@ -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
@@ -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);
         }
     }
 }