Restyle registrar console based on the new design proposal (#2336)

console-webapp/src/app/navigation/navigation.component.html

@@ -0,0 +1,44 @@
+<mat-tree
+  [dataSource]="dataSource"
+  [treeControl]="treeControl"
+  class="console-app__nav-tree"
+>
+  <mat-tree-node
+    *matTreeNodeDef="let node"
+    matTreeNodeToggle
+    (click)="onClick(node)"
+    [class.active]="router.url.endsWith(node.path)"
+  >
+    <mat-icon class="console-app__nav-icon" *ngIf="node.iconName">
+      {{ node.iconName }}
+    </mat-icon>
+    {{ node.title }}
+  </mat-tree-node>
+  <mat-nested-tree-node
+    *matTreeNodeDef="let node; when: hasChild"
+    (click)="onClick(node)"
+  >
+    <div class="mat-tree-node" [class.active]="router.url.endsWith(node.path)">
+      <button
+        class="console-app__nav-icon_expand"
+        mat-icon-button
+        matTreeNodeToggle
+        [attr.aria-label]="'Toggle ' + node.title"
+      >
+        <mat-icon>
+          {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
+        </mat-icon>
+      </button>
+      <mat-icon class="console-app__nav-icon" *ngIf="node.iconName">
+        {{ node.iconName }}
+      </mat-icon>
+      {{ node.title }}
+    </div>
+    <div
+      [class.console-app__nav-tree_invisible]="!treeControl.isExpanded(node)"
+      role="group"
+    >
+      <ng-container matTreeNodeOutlet></ng-container>
+    </div>
+  </mat-nested-tree-node>
+</mat-tree>