Merge 314b999 into 7819105

src/app/core/core.module.ts

@@ -5,18 +5,13 @@ import { RouterModule } from '@angular/router';
 import { ConfigValidationService } from './config';
 import { SharedModule } from '../shared/shared.module';
 import { MaterialModule } from '../material/material.module';
-import {
-  AppNavComponent,
-  LicenseComponent,
-  MenuHeaderComponent,
-  SectionNavComponent,
-} from './nav-menu/components/';
+import { AppNavComponent, LicenseComponent, MenuHeaderComponent } from './nav-menu/components/';
 import { SidebarWidthService, SnackBarService } from './services';
 
 @NgModule({
   imports: [CommonModule, SharedModule, MaterialModule, RouterModule],
-  exports: [AppNavComponent, SectionNavComponent],
-  declarations: [AppNavComponent, SectionNavComponent, LicenseComponent, MenuHeaderComponent],
+  exports: [AppNavComponent],
+  declarations: [AppNavComponent, LicenseComponent, MenuHeaderComponent],
   providers: [ConfigValidationService, SnackBarService, SidebarWidthService],
 })
 export class CoreModule {

src/app/core/nav-menu/components/app-nav/app-nav.component.html

@@ -1,17 +1,23 @@
 <div>
-  <cs-menu-header (buttonClicked)="onMenuButtonClicked()"></cs-menu-header>
+  <cs-menu-header [username]="username"></cs-menu-header>
 
   <div class="nav-routes">
     <ng-container *ngFor="let route of routes">
-      <a
-        class="nav-link"
-        [class.link-active]="route && currentRoute && route.id === currentRoute.id"
-        [routerLink]="route.path"
-        (click)="onMenuButtonClicked()"
-      >
-        <mat-icon [ngClass]="route.icon"></mat-icon>
-        {{ route.text | translate }}
-      </a>
+      <mat-expansion-panel [expanded]="route && currentRoute && route.id === currentRoute.id">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <mat-icon [ngClass]="route.icon"></mat-icon>
+            {{ route.text | translate }}
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <ng-container *ngFor="let subroute of route.subroutes">
+          <a [routerLink]="subroute.path" class="nav-sub-link" routerLinkActive="link-active">
+            <mat-icon [ngClass]="subroute.icon"></mat-icon>
+            {{ subroute.text | translate }}
+          </a>
+        </ng-container>
+      </mat-expansion-panel>
+      <mat-divider></mat-divider>
     </ng-container>
 
     <a class="nav-link" routerLink="/logout">

src/app/core/nav-menu/components/app-nav/app-nav.component.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: space-between;
   min-width: $nav-menu-min-width;
-  height: 100%;
+  overflow: auto;
 }
 
 .nav-routes {
@@ -14,15 +14,54 @@
   display: flex;
   flex-direction: column;
 
+  .mat-expansion-panel {
+    border-radius: 0;
+    background: none;
+    color: rgba(255, 255, 255, 0.87);
+    box-shadow: none;
+
+    ::ng-deep .mat-expansion-panel-header-description,
+    .mat-expansion-panel-header-title {
+      align-items: center;
+    }
+
+    .mat-expansion-panel-header-title {
+      color: white;
+      font-size: 14px;
+    }
+
+    ::ng-deep .mat-expansion-panel-header-description,
+    ::ng-deep .mat-expansion-indicator::after {
+      color: rgba(255, 255, 255, 0.74);
+    }
+
+    ::ng-deep .mat-expansion-panel-content {
+      font-size: 13px;
+
+      ::ng-deep .mat-expansion-panel-body {
+        padding: 0;
+      }
+    }
+  }
+
+  mat-icon {
+    margin-right: 10px;
+  }
+
   .nav-link {
-    padding: 12px 25px;
+    padding: 12px 24px;
     display: flex;
     align-items: center;
     color: inherit;
     text-decoration: none;
+    font-size: 14px;
+  }
 
-    mat-icon {
-      margin-right: 10px;
-    }
+  .nav-sub-link {
+    padding: 12px 40px;
+    display: flex;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
   }
 }

src/app/core/nav-menu/components/app-nav/app-nav.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { Route } from '../../models';
 
@@ -13,10 +13,6 @@ export class AppNavComponent {
   public routes: Route[];
   @Input()
   public currentRoute: Route;
-  @Output()
-  public menuButtonClicked = new EventEmitter<void>();
-
-  public onMenuButtonClicked(): void {
-    this.menuButtonClicked.emit();
-  }
+  @Input()
+  public username: string;
 }

src/app/core/nav-menu/components/index.ts

@@ -1,4 +1,3 @@
 export * from './app-nav/app-nav.component';
 export * from './license/license.component';
 export * from './menu-header/menu-header.component';
-export * from './section-nav/section-nav.component';

src/app/core/nav-menu/components/menu-header/menu-header.component.html

@@ -1,8 +1,4 @@
 <div class="menu-header">
-  <button mat-icon-button (click)="onButtonClicked()">
-    <mat-icon class="mdi-menu"></mat-icon>
-  </button>
-
   <img class="logo" src="img/cloudstack_logo_light.png" alt="CloudStack logo" />
 
   <div class="account-info" *ngIf="username != null">

src/app/core/nav-menu/nav-menu-theme.scss

@@ -10,6 +10,7 @@
     color: mat-color($primary, '500-contrast');
     background-color: mat-color($primary);
 
+    .nav-sub-link:hover,
     .nav-link:hover,
     .link-active {
       background-color: mat-color($primary, 300);

src/app/core/nav-menu/routes/app-nav-routes.ts

@@ -5,7 +5,7 @@ import { Route } from '../models';
 export const appNavRoutes: Route[] = [
   {
     id: 'virtual-machines',
-    text: 'NAVIGATION_SIDEBAR.VMS',
+    text: 'NAVIGATION_SIDEBAR.CLOUD',
     path: '/instances',
     icon: 'mdi-cloud',
     subroutes: virtualMachinesSubroutes,

src/app/core/nav-menu/routes/virtual-machines-subroutes.ts

@@ -2,13 +2,13 @@ export const virtualMachinesSubroutes = [
   {
     text: 'NAVIGATION_SIDEBAR.VMS',
     path: '/instances',
-    icon: 'mdi-cloud',
+    icon: 'mdi-server',
     routeId: 'virtual-machines',
   },
   {
     text: 'NAVIGATION_SIDEBAR.STORAGE',
     path: '/storage',
-    icon: 'mdi-server',
+    icon: 'mdi-database',
     routeId: 'virtual-machines',
   },
   {

src/app/home/home.component.html

@@ -1,18 +1,10 @@
 <mat-sidenav-container fullscreen>
-  <mat-sidenav [opened]="showAppNav$ | async" (closed)="closeAppNavInternal()">
+  <mat-sidenav-content>
     <cs-app-nav
+      [username]="username"
       [routes]="routes$ | async"
       [currentRoute]="currentRoute$ | async"
-      (menuButtonClicked)="closeAppNav()"
     ></cs-app-nav>
-  </mat-sidenav>
-
-  <mat-sidenav-content>
-    <cs-section-nav
-      [username]="username"
-      [subroutes]="subroutes$ | async"
-      (menuButtonClicked)="openAppNav()"
-    ></cs-section-nav>
     <div class="primary-content"><router-outlet></router-outlet></div>
   </mat-sidenav-content>
 </mat-sidenav-container>

src/i18n/en.json

@@ -342,6 +342,7 @@
   "NAVIGATION_SIDEBAR": {
     "WELCOME": "Welcome, {{ name }}",
     "VMS": "Virtual machines",
+    "CLOUD": "Cloud",
     "STORAGE": "Storage",
     "IMAGES": "Images",
     "SNAPSHOTS": "Snapshots",

src/i18n/ru.json

@@ -342,6 +342,7 @@
   "NAVIGATION_SIDEBAR": {
     "WELCOME": "Здравствуйте, {{ name }}",
     "VMS": "Виртуальные машины",
+    "CLOUD": "облако",
     "STORAGE": "Хранилище",
     "IMAGES": "Образы",
     "SNAPSHOTS": "Снимки",