[ADF-3177] added general header component (#3537)

* [ADF-3177] added general header component

* [ADF-3177] added documentation and removed user info mobile behaviour

* [ADF-3177] eddited doc file

* [ADF-3177] renamed folder and style changes

* [ADF-3177] style changes

* [ADF-3177] fix tests

* [ADF-3177] fix lint errors and tests

* [APM-3177] css changes

* [ADF-3177] fix pr

* [ADF-3177] updated documentation

* [ADF-3177] expose module with old name

* [ADF-3177] expose module with old name

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

@@ -2,31 +2,29 @@
 
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu">
-            <mat-toolbar color="primary" class="adf-app-layout-toolbar mat-elevation-z6">
-                <button mat-icon-button (click)="toggleMenu()" *ngIf="!hideSidenav">
-                    <mat-icon>menu</mat-icon>
-                </button>
+            <adf-layout-header title="{{ 'APP_LAYOUT.APP_NAME' | translate}}" color="primary" (clicked)=toggleMenu($event)>
 
-                <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
+            <div class="adf-app-layout-menu-spacer"></div>
 
-                <div class="adf-app-layout-menu-spacer"></div>
+            <app-search-bar fxFlex="0 1 auto"></app-search-bar>
 
-                <app-search-bar fxFlex="0 1 auto"></app-search-bar>
+            <div class="adf-header-delimiter"></div>
 
-                <adf-userinfo
-                    class="adf-app-layout-user-profile"
-                    [menuPositionX]="'before'"
-                    [menuPositionY]="'above'">
-                </adf-userinfo>
+            <adf-userinfo
+                class="adf-app-layout-user-profile"
+                [menuPositionX]="'before'"
+                [menuPositionY]="'above'">
+            </adf-userinfo>
 
-                <app-theme-picker></app-theme-picker>
-                <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>
-            </mat-toolbar>
+            <app-theme-picker></app-theme-picker>
+            <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>
     </adf-sidenav-layout-header>