chore: update style loading, polish implementation

Author: elena-gancheva

examples/coffee-warehouse-nextjs/app/App.scss

@@ -11,4 +11,6 @@ body {
     }
 }
 
-@import "./styles/main.scss";
+header {
+    background-image: url('./assets/header-bg.png');
+}

examples/coffee-warehouse-nextjs/app/components/Chart.jsx

@@ -1,4 +1,4 @@
-'use client'
+"use client"
 import React from 'react';
 import * as PropTypes from 'prop-types';
 

examples/coffee-warehouse-nextjs/app/components/DrawerRouterContainer.jsx

@@ -1,4 +1,4 @@
-'use client'
+"use client"
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Drawer, DrawerContent } from '@progress/kendo-react-layout';

examples/coffee-warehouse-nextjs/app/components/Grid.jsx

@@ -1,4 +1,4 @@
-'use client'
+"use client"
 import React from 'react';
 import * as PropTypes from 'prop-types';
 

examples/coffee-warehouse-nextjs/app/components/GridCells.jsx

@@ -1,4 +1,4 @@
-'use client'
+"use client"
 import * as React from 'react';
 
 import {

examples/coffee-warehouse-nextjs/app/components/Header.jsx

@@ -12,6 +12,7 @@ import { locales } from "./../resources/locales";
 
 import headerBg from "../assets/header-bg.png";
 import userAvatar from "../assets/user-avatar.jpg";
+import DrawerLayout from "../drawer/layout";
 const noMessage = "message not defined";
 
 export const Header = (props) => {
@@ -37,12 +38,8 @@ export const Header = (props) => {
   }, []);
 
   return (
-    <header className="header" style={{ backgroundImage: `url(${headerBg})` }}>
+    <header className="header">
       <div className="nav-container">
-        <div className="menu-button">
-          <span className={"k-icon k-i-menu"} onClick={onButtonClick} />
-        </div>
-
         <div className="title">
           <h1>
             {localizationService.toLanguageString(