Update EUI layout components in bfetch example plugin (#163490)

## Summary

Partially addresses https://github.com/elastic/kibana/issues/161422

New look:

<img width="1756" alt="image"
src="22ca2936-1a5f-4913-b832-0c5a4e037b08">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

examples/bfetch_explorer/public/components/page/index.tsx

@@ -7,34 +7,23 @@
  */
 
 import * as React from 'react';
-import {
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageTemplate, EuiPageSection, EuiPageHeader } from '@elastic/eui';
 
 export interface PageProps {
   title?: React.ReactNode;
+  sidebar?: React.ReactNode;
 }
 
-export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
+export const Page: React.FC<PageProps> = ({ title = 'Untitled', sidebar, children }) => {
   return (
-    <EuiPageBody>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{title}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
-          {children}
-        </EuiPageContentBody>
-      </EuiPageContent>
-    </EuiPageBody>
+    <EuiPageTemplate panelled={true} offset={0} grow={true}>
+      <EuiPageTemplate.Sidebar>{sidebar}</EuiPageTemplate.Sidebar>
+      <EuiPageTemplate.Header>
+        <EuiPageHeader pageTitle={title} />
+      </EuiPageTemplate.Header>
+      <EuiPageTemplate.Section>
+        <EuiPageSection style={{ maxWidth: 800, margin: '0 auto' }}>{children}</EuiPageSection>
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
   );
 };

examples/bfetch_explorer/public/containers/app/index.tsx

@@ -11,7 +11,6 @@ import { Redirect } from 'react-router-dom';
 import { BrowserRouter as Router, Route, Routes } from '@kbn/shared-ux-router';
 import { EuiPage } from '@elastic/eui';
 import { useDeps } from '../../hooks/use_deps';
-import { Sidebar } from './sidebar';
 import { routes } from '../../routes';
 
 export const App: React.FC = () => {
@@ -27,7 +26,6 @@ export const App: React.FC = () => {
   return (
     <Router basename={appBasePath}>
       <EuiPage>
-        <Sidebar />
         <Routes>
           {routeElements}
           <Redirect to="/count-until" />

examples/bfetch_explorer/public/containers/app/pages/page_count_until/index.tsx

@@ -11,6 +11,7 @@ import { EuiPanel, EuiText } from '@elastic/eui';
 import { CountUntil } from '../../../../components/count_until';
 import { Page } from '../../../../components/page';
 import { useDeps } from '../../../../hooks/use_deps';
+import { Sidebar } from '../../sidebar';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface Props {}
@@ -19,7 +20,7 @@ export const PageCountUntil: React.FC<Props> = () => {
   const { plugins } = useDeps();
 
   return (
-    <Page title={'Count Until'}>
+    <Page title={'Count Until'} sidebar={<Sidebar />}>
       <EuiText>
         This demo sends a single number N using <code>fetchStreaming</code> to the server. The
         server will stream back N number of messages with 1 second delay each containing a number

examples/bfetch_explorer/public/containers/app/pages/page_double_integers/index.tsx

@@ -11,6 +11,7 @@ import { EuiPanel, EuiText } from '@elastic/eui';
 import { DoubleIntegers } from '../../../../components/double_integers';
 import { Page } from '../../../../components/page';
 import { useDeps } from '../../../../hooks/use_deps';
+import { Sidebar } from '../../sidebar';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface Props {}
@@ -19,7 +20,7 @@ export const PageDoubleIntegers: React.FC<Props> = () => {
   const { explorer } = useDeps();
 
   return (
-    <Page title={'Double Integers'}>
+    <Page title={'Double Integers'} sidebar={<Sidebar />}>
       <EuiText>
         Below is a list of numbers in milliseconds. They are sent as a batch to the server. For each
         number server waits given number of milliseconds then doubles the number and streams it

examples/bfetch_explorer/public/containers/app/sidebar/index.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { EuiSideNav } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { routes } from '../../../routes';
 
@@ -18,26 +18,24 @@ export const Sidebar: React.FC<SidebarProps> = () => {
   const history = useHistory();
 
   return (
-    <EuiPageSideBar>
-      <EuiSideNav
-        items={[
-          {
-            name: 'bfetch explorer',
-            id: 'home',
-            items: routes.map(({ id, title, items }) => ({
-              id,
-              name: title,
-              isSelected: true,
-              items: items.map((route) => ({
-                id: route.id,
-                name: route.title,
-                onClick: () => history.push(`/${route.id}`),
-                'data-test-subj': route.id,
-              })),
+    <EuiSideNav
+      items={[
+        {
+          name: 'bfetch explorer',
+          id: 'home',
+          items: routes.map(({ id, title, items }) => ({
+            id,
+            name: title,
+            isSelected: true,
+            items: items.map((route) => ({
+              id: route.id,
+              name: route.title,
+              onClick: () => history.push(`/${route.id}`),
+              'data-test-subj': route.id,
             })),
-          },
-        ]}
-      />
-    </EuiPageSideBar>
+          })),
+        },
+      ]}
+    />
   );
 };