[ADF-4233] DemoShell - change nested menu layout (#4438)

demo-shell/src/app/app.module.ts

@@ -80,6 +80,7 @@ import { PeopleGroupCloudDemoComponent } from './components/app-layout/cloud/peo
 import { CloudSettingsComponent } from './components/app-layout/cloud/cloud-settings.component';
 import { AppExtensionsModule } from './app-extension.module';
 import { ProcessDetailsCloudDemoComponent } from './components/app-layout/cloud/process-details-cloud-demo.component';
+import { NestedMenuPositionDirective } from './components/app-layout/cloud/directives/nested-menu-position.directive';
 
 @NgModule({
     imports: [
@@ -145,7 +146,8 @@ import { ProcessDetailsCloudDemoComponent } from './components/app-layout/cloud/
         CloudFiltersDemoComponent,
         TemplateDemoComponent,
         PeopleGroupCloudDemoComponent,
-        CloudSettingsComponent
+        CloudSettingsComponent,
+        NestedMenuPositionDirective
     ],
     providers: [
         {

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -34,13 +34,14 @@
             <mat-nav-list class="adf-sidenav-linklist">
 
                 <ng-container *ngFor="let link of links">
-                    <a mat-list-item *ngIf="link.children" [attr.data-automation-id]="link.title | translate"
-                        class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu"
+                    <a appNestedMenuPosition mat-list-item #appMenuTrigger *ngIf="link.children" [attr.data-automation-id]="link.title | translate"
+                        class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu" menuMinimized="{{ isMenuMinimized() }}"
                         [matMenuTriggerData]="{links: link.children}">
 
                         <mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
                         <div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">
                             {{link.title | translate }}</div>
+                        <mat-icon class="adf-menu-expand-icon">arrow_right</mat-icon>
                     </a>
 
                     <a mat-list-item *ngIf="!link.children" [attr.data-automation-id]="link.title | translate"
@@ -72,7 +73,7 @@
 </adf-sidenav-layout>
 <app-log></app-log>
 
-<mat-menu #nestedMenu="matMenu">
+<mat-menu #nestedMenu="matMenu" [xPosition]="'before'">
     <ng-template matMenuContent let-links="links">
         <button mat-menu-item *ngFor="let link of links"
             [attr.data-automation-id]="link.title | translate"

demo-shell/src/app/components/app-layout/app-layout.component.scss

@@ -55,6 +55,7 @@
             .adf-sidenav-menu-label {
                 font-size: 14px;
                 white-space: nowrap;
+                min-width: 120px;
             }
         }
 

demo-shell/src/app/components/app-layout/cloud/directives/nested-menu-position.directive.ts

@@ -0,0 +1,57 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Directive, HostListener, Input } from '@angular/core';
+
+@Directive({
+    selector: '[appNestedMenuPosition]'
+})
+export class NestedMenuPositionDirective {
+
+    @Input()
+    menuMinimized: string;
+
+    nestedMenuLeftPadding: string = '220px';
+
+    @HostListener('click', ['$event'])
+    onClick(event: any) {
+
+        const bodyRect = document.body.getBoundingClientRect();
+        let overlayContainer = (document.querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement);
+        (document.querySelector('.cdk-overlay-pane') as HTMLElement).style.width = '100%';
+
+        if (this.menuMinimized === 'false') {
+            setTimeout( () => {
+                const elementPosition = this.getElementOffset(event);
+                overlayContainer.style.top = elementPosition.top - bodyRect.top + 'px';
+                overlayContainer.style.left = this.nestedMenuLeftPadding;
+            });
+        }
+   }
+
+   isMenuClicked(item: string) {
+       return item.includes('adf-sidenav-menu-label');
+   }
+
+   getElementOffset(event) {
+       if (this.isMenuClicked(event.target.className)) {
+           return event.target.offsetParent.getBoundingClientRect();
+       } else {
+            return event.target.getBoundingClientRect();
+       }
+   }
+}