chore: update layout demo

Author: yanmariomenev

examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.css

@@ -31,21 +31,30 @@ html {
 
 .custom-toolbar {
     width: 100%;
-    background-color: #f6f6f6;
-    line-height: 10px;
+    height: 48px;
+    background-color: #757575;
     border-bottom: inset;
     border-bottom-width: 1px;
     padding: 3px;
-    color: #656565;
+    color: #ffffff;
     flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.custom-toolbar kendo-avatar {
+    margin-right: 10px;
 }
+
 .mail-box {
     font-weight: bold;
     font-size: 17px;
+    padding-left: 8px;
 }
 h5 {
-    font-size: 1.25rem!important;
+    font-size: 1.25rem !important;
     font-weight: 500;
     margin: 0;
     padding: 0;
-}
+}

examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.html

@@ -1,8 +1,14 @@
 <div class="wrapper">
     <div class="custom-toolbar">
         <button kendoButton [svgIcon]="layoutSvg" fillMode="flat" (click)="drawer.toggle()">
-            <span class="mail-box">Drawer component</span>
+            <h1 class="mail-box">Drawer component</h1>
         </button>
+        <kendo-avatar
+        [imageSrc]="kendokaAvatar"
+        shape="circle"
+        width="38px"
+        height="40px"
+      ></kendo-avatar>
     </div>
     <kendo-drawer-container class="customClass">
         <kendo-drawer

examples-standalone/kendoangular-landing-page/src/app/components/layout/my-layout.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { DrawerSelectEvent, KENDO_DRAWER } from '@progress/kendo-angular-layout';
+import { DrawerSelectEvent, KENDO_DRAWER, KENDO_LAYOUT } from '@progress/kendo-angular-layout';
 import {
     alignJustifyIcon,
     cellsMergeVerticallyIcon,
@@ -21,7 +21,7 @@ import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
 @Component({
     selector: 'app-layout',
     encapsulation: ViewEncapsulation.None,
-    imports: [KENDO_DRAWER, KENDO_BUTTONS, LayoutComponent],
+    imports: [KENDO_DRAWER, KENDO_BUTTONS, KENDO_LAYOUT, LayoutComponent],
     templateUrl: './my-layout.component.html',
     styleUrl: './my-layout.component.css',
 })
@@ -56,4 +56,6 @@ export class MyLayoutComponent {
     public onSelect(ev: DrawerSelectEvent): void {
         this.selected = ev.item.text;
     }
+    public kendokaAvatar = "assets/kendoka-angular.png";
+
 }