[ADF-3512] SidenavLayoutComponent option to show the sidebar on the right (#3768)

* add sidebar end start property

* add demo and test

* fix test

* fix failing test

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

@@ -1,28 +1,39 @@
-<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav" [expandedSidenav]= "expandedSidenav" (expanded)="setState($event)">
+<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav"
+                    [expandedSidenav]="expandedSidenav" (expanded)="setState($event)"
+                    [position]="position">
 
     <adf-sidenav-layout-header>
-        <ng-template let-toggleMenu="toggleMenu">
-            <adf-layout-header  id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo" [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
+        <ng-template let-toggleMenu=" toggleMenu">
 
-            <div class="adf-app-layout-menu-spacer"></div>
+            <adf-layout-header id="adf-header"
+                               [title]="title | translate"
+                               [redirectUrl]="redirectUrl"
+                               [logo]="logo"
+                               [tooltip]="tooltip | translate"
+                               [showSidenavToggle]="showMenu"
+                               [color]="color"
+                               [position]="position"
+                               (clicked)=toggleMenu($event)>
 
-            <app-search-bar fxFlex="0 1 auto"></app-search-bar>
+                <div class="adf-app-layout-menu-spacer"></div>
 
-            <div class="adf-header-delimiter"></div>
+                <app-search-bar fxFlex="0 1 auto"></app-search-bar>
 
-            <adf-userinfo
-                class="adf-app-layout-user-profile"
-                [menuPositionX]="'before'"
-                [menuPositionY]="'above'">
-            </adf-userinfo>
+                <div class="adf-header-delimiter"></div>
 
-            <app-theme-picker></app-theme-picker>
-            <button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
-                <mat-icon>language</mat-icon>
-            </button>
-            <mat-menu #langMenu="matMenu" class="adf-menu">
-                <adf-language-menu></adf-language-menu>
-            </mat-menu>
+                <adf-userinfo
+                    class="adf-app-layout-user-profile"
+                    [menuPositionX]="'before'"
+                    [menuPositionY]="'above'">
+                </adf-userinfo>
+
+                <app-theme-picker></app-theme-picker>
+                <button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
+                    <mat-icon>language</mat-icon>
+                </button>
+                <mat-menu #langMenu="matMenu" class="adf-menu">
+                    <adf-language-menu></adf-language-menu>
+                </mat-menu>
 
             </adf-layout-header>
         </ng-template>
@@ -31,19 +42,23 @@
     <adf-sidenav-layout-navigation>
         <ng-template let-isMenuMinimized="isMenuMinimized">
             <mat-nav-list class="adf-sidenav-linklist">
-                <a mat-list-item *ngFor="let link of links" [attr.data-automation-id]="link.title | translate" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="adf-sidenav-link">
+                <a mat-list-item *ngFor="let link of links" [attr.data-automation-id]="link.title | translate"
+                   [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
+                   class="adf-sidenav-link">
                     <mat-icon matListIcon class="sidenav-menu-icon">{{link.icon}}</mat-icon>
                     <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
                 </a>
-                <a mat-list-item adf-logout [enabelRedirect]="enabelRedirect" redirectUri="/logout" class="adf-sidenav-link">
+                <a mat-list-item adf-logout [enabelRedirect]="enabelRedirect" redirectUri="/logout"
+                   class="adf-sidenav-link">
                     <mat-icon matListIcon class="sidenav-menu-icon">exit_to_app</mat-icon>
                     <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
                 </a>
             </mat-nav-list>
+
         </ng-template>
     </adf-sidenav-layout-navigation>
 
-    <adf-sidenav-layout-content >
+    <adf-sidenav-layout-content>
         <ng-template>
             <router-outlet></router-outlet>
         </ng-template>

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

@@ -34,9 +34,9 @@ export class AppLayoutComponent implements OnInit {
         { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
         { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
         { href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
-        { href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS'},
-        { href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW'},
-        { href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA'},
+        { href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS' },
+        { href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW' },
+        { href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
         { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
         { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
         { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
@@ -61,6 +61,8 @@ export class AppLayoutComponent implements OnInit {
 
     expandedSidenav = false;
 
+    position = 'start';
+
     hideSidenav = false;
     showMenu = true;
 
@@ -87,6 +89,7 @@ export class AppLayoutComponent implements OnInit {
         this.headerService.logo.subscribe(path => this.logo = path);
         this.headerService.redirectUrl.subscribe(redirectUrl => this.redirectUrl = redirectUrl);
         this.headerService.tooltip.subscribe(tooltip => this.tooltip = tooltip);
+        this.headerService.position.subscribe(position => this.position = position);
     }
 
     constructor(
@@ -104,4 +107,4 @@ export class AppLayoutComponent implements OnInit {
             this.userpreference.set('expandedSidenav', state);
         }
     }
- }
+}

demo-shell/src/app/components/header-data/header-data.component.html

@@ -13,34 +13,46 @@
                 <option value="warn">Warn</option>
             </select>
             OR
-            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)" placeholder="hex color code">
+            <input type="text" name="color" (keyup.enter)="changeColor($event.target.value)"
+                   placeholder="hex color code">
             <p>*Choose only one value at a time: either hex code or theme color.</p>
             <p>*press enter for submitting new hex color</p>
         </div>
 
         <div>
             <label>Change title</label>
-            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)" placeholder ="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
+            <input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)"
+                   placeholder="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
             <p>*press enter for submitting new title</p>
         </div>
 
         <div>
             <label>Change logo</label>
-            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)" >
+            <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)">
             <p>*press enter for submitting new logo</p>
         </div>
 
         <div>
             <label>Change logo link</label>
-            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)" >
+            <input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)">
             <p>*Input JSON friendly array or explicit string. E.g. ["/test", 33, "user", 11] or "/test"</p>
             <p>*press enter for submitting new link on logo</p>
         </div>
 
         <div>
             <label>Change logo tooltip</label>
-            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)" >
+            <input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)">
             <p>*press enter for submitting new tooltip</p>
         </div>
+
+        <div>
+            <label>Sidebar Position </label>
+
+            <mat-radio-group [(ngModel)]="position" (change)="changePosition()">
+                <mat-radio-button value="start">Start</mat-radio-button>
+                <mat-radio-button value="end">End</mat-radio-button>
+            </mat-radio-group>
+        </div>
+
     </mat-card>
 </div>

demo-shell/src/app/components/header-data/header-data.component.ts

@@ -24,8 +24,10 @@ import { HeaderDataService } from './header-data.service';
 })
 export class HeaderDataComponent {
     checkbox = true;
+    position = 'start';
 
-    constructor(private headerService: HeaderDataService) {}
+    constructor(private headerService: HeaderDataService) {
+    }
 
     hideButton() {
         this.headerService.hideMenuButton();
@@ -59,4 +61,8 @@ export class HeaderDataComponent {
             this.headerService.changeTooltip(tooltip);
         }
     }
+
+    changePosition() {
+        this.headerService.changePosition(this.position);
+    }
 }

demo-shell/src/app/components/header-data/header-data.service.ts

@@ -20,38 +20,43 @@ import { Injectable, Output, EventEmitter } from '@angular/core';
 @Injectable()
 export class HeaderDataService {
 
-  show = true;
+    show = true;
 
-  @Output() hideMenu: EventEmitter<boolean> = new EventEmitter();
-  @Output() color: EventEmitter<string> = new EventEmitter();
-  @Output() title: EventEmitter<string> = new EventEmitter();
-  @Output() logo: EventEmitter<string> = new EventEmitter();
-  @Output() redirectUrl: EventEmitter<string|any[]> = new EventEmitter();
-  @Output() tooltip: EventEmitter<string> = new EventEmitter();
+    @Output() hideMenu: EventEmitter<boolean> = new EventEmitter();
+    @Output() color: EventEmitter<string> = new EventEmitter();
+    @Output() title: EventEmitter<string> = new EventEmitter();
+    @Output() logo: EventEmitter<string> = new EventEmitter();
+    @Output() redirectUrl: EventEmitter<string | any[]> = new EventEmitter();
+    @Output() tooltip: EventEmitter<string> = new EventEmitter();
+    @Output() position: EventEmitter<string> = new EventEmitter();
 
-  hideMenuButton() {
-    this.show = !this.show;
-    this.hideMenu.emit(this.show);
-  }
+    hideMenuButton() {
+        this.show = !this.show;
+        this.hideMenu.emit(this.show);
+    }
 
-  changeColor(color: string) {
-    this.color.emit(color);
-  }
+    changeColor(color: string) {
+        this.color.emit(color);
+    }
 
-  changeTitle(title: string) {
-    this.title.emit(title);
+    changeTitle(title: string) {
+        this.title.emit(title);
 
-  }
+    }
 
-  changeLogo(logoPath: string) {
-    this.logo.emit(logoPath);
-  }
+    changeLogo(logoPath: string) {
+        this.logo.emit(logoPath);
+    }
 
-  changeRedirectUrl(redirectUrl: string | any[]) {
-    this.redirectUrl.emit(redirectUrl);
-  }
+    changeRedirectUrl(redirectUrl: string | any[]) {
+        this.redirectUrl.emit(redirectUrl);
+    }
 
-  changeTooltip(tooltip: string) {
-    this.tooltip.emit(tooltip);
-  }
+    changeTooltip(tooltip: string) {
+        this.tooltip.emit(tooltip);
+    }
+
+    changePosition(position) {
+        this.position.emit(position);
+    }
 }