diff --git a/src/core/public/chrome/chrome_service.test.ts b/src/core/public/chrome/chrome_service.test.ts
index f11b0f3965e6..46a6612fd377 100644
--- a/src/core/public/chrome/chrome_service.test.ts
+++ b/src/core/public/chrome/chrome_service.test.ts
@@ -41,6 +41,7 @@ import { notificationServiceMock } from '../notifications/notifications_service.
 import { uiSettingsServiceMock } from '../ui_settings/ui_settings_service.mock';
 import { ChromeService } from './chrome_service';
 import { getAppInfo } from '../application/utils';
+import { overlayServiceMock } from '../mocks';
 
 class FakeApp implements App {
   public title = `${this.id} App`;
@@ -67,6 +68,7 @@ function defaultStartDeps(availableApps?: App[]) {
     injectedMetadata: injectedMetadataServiceMock.createStartContract(),
     notifications: notificationServiceMock.createStartContract(),
     uiSettings: uiSettingsServiceMock.createStartContract(),
+    overlays: overlayServiceMock.createStartContract(),
   };
 
   if (availableApps) {
diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
index 7994c6dcc0c0..480c10e4186b 100644
--- a/src/core/public/chrome/chrome_service.tsx
+++ b/src/core/public/chrome/chrome_service.tsx
@@ -52,6 +52,7 @@ import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
 import { Branding } from '../';
 import { getLogos } from '../../common';
 import type { Logos } from '../../common/types';
+import { OverlayStart } from '../overlays';
 
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
@@ -97,6 +98,7 @@ interface StartDeps {
   injectedMetadata: InjectedMetadataStart;
   notifications: NotificationsStart;
   uiSettings: IUiSettingsClient;
+  overlays: OverlayStart;
 }
 
 /** @internal */
@@ -150,6 +152,7 @@ export class ChromeService {
     injectedMetadata,
     notifications,
     uiSettings,
+    overlays,
   }: StartDeps): Promise<InternalChromeStart> {
     this.initVisibility(application);
 
@@ -161,6 +164,7 @@ export class ChromeService {
     const customNavLink$ = new BehaviorSubject<ChromeNavLink | undefined>(undefined);
     const helpSupportUrl$ = new BehaviorSubject<string>(OPENSEARCH_DASHBOARDS_ASK_OPENSEARCH_LINK);
     const isNavDrawerLocked$ = new BehaviorSubject(localStorage.getItem(IS_LOCKED_KEY) === 'true');
+    const sidecarConfig$ = overlays.sidecar.getSidecarConfig$();
 
     const navControls = this.navControls.start();
     const navLinks = this.navLinks.start({ application, http });
@@ -263,6 +267,7 @@ export class ChromeService {
           branding={injectedMetadata.getBranding()}
           logos={logos}
           survey={injectedMetadata.getSurvey()}
+          sidecarConfig$={sidecarConfig$}
         />
       ),
 
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 7ec470c74e03..84821e0ab4e4 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -1925,6 +1925,58 @@ exports[`Header handles visibility and lock changes 1`] = `
       "thrownError": null,
     }
   }
+  sidecarConfig$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "dockedMode": "right",
+        "paddingSize": 640,
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
   survey="/"
 >
   <header
@@ -2416,10 +2468,20 @@ exports[`Header handles visibility and lock changes 1`] = `
             },
           ]
         }
+        style={
+          Object {
+            "paddingRight": 640,
+          }
+        }
         theme="dark"
       >
         <div
           className="euiHeader euiHeader--dark euiHeader--fixed expandedHeader"
+          style={
+            Object {
+              "paddingRight": 640,
+            }
+          }
         >
           <EuiHeaderSection
             key="items-0"
@@ -2911,9 +2973,19 @@ exports[`Header handles visibility and lock changes 1`] = `
       <EuiHeader
         className="primaryHeader"
         position="fixed"
+        style={
+          Object {
+            "paddingRight": 640,
+          }
+        }
       >
         <div
           className="euiHeader euiHeader--default euiHeader--fixed primaryHeader"
+          style={
+            Object {
+              "paddingRight": 640,
+            }
+          }
         >
           <EuiHeaderSection
             grow={false}
@@ -8449,6 +8521,58 @@ exports[`Header renders condensed header 1`] = `
       "thrownError": null,
     }
   }
+  sidecarConfig$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "dockedMode": "right",
+        "paddingSize": 640,
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
   survey="/"
 >
   <header
@@ -8461,9 +8585,19 @@ exports[`Header renders condensed header 1`] = `
       <EuiHeader
         className="primaryHeader"
         position="fixed"
+        style={
+          Object {
+            "paddingRight": 640,
+          }
+        }
       >
         <div
           className="euiHeader euiHeader--default euiHeader--fixed primaryHeader"
+          style={
+            Object {
+              "paddingRight": 640,
+            }
+          }
         >
           <EuiHeaderSection
             grow={false}
diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx
index c829361ff5c1..0d3bc7e70d45 100644
--- a/src/core/public/chrome/ui/header/header.test.tsx
+++ b/src/core/public/chrome/ui/header/header.test.tsx
@@ -36,6 +36,7 @@ import { httpServiceMock } from '../../../http/http_service.mock';
 import { applicationServiceMock, chromeServiceMock } from '../../../mocks';
 import { Header } from './header';
 import { StubBrowserStorage } from 'test_utils/stub_browser_storage';
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../../../overlays';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
   htmlIdGenerator: () => () => 'mockId',
@@ -72,6 +73,10 @@ function mockProps() {
     branding: {},
     survey: '/',
     logos: chromeServiceMock.createStartContract().logos,
+    sidecarConfig$: new BehaviorSubject<ISidecarConfig>({
+      dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+      paddingSize: 640,
+    }),
   };
 }
 
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 8eb594802b8d..8ff9529288bd 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -41,7 +41,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import classnames from 'classnames';
-import React, { createRef, useState } from 'react';
+import React, { createRef, useMemo, useState } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { LoadingIndicator } from '../';
@@ -65,7 +65,7 @@ import { HeaderNavControls } from './header_nav_controls';
 import { HeaderActionMenu } from './header_action_menu';
 import { HeaderLogo } from './header_logo';
 import type { Logos } from '../../../../common/types';
-
+import { ISidecarConfig, getOsdSidecarPaddingStyle } from '../../../overlays';
 export interface HeaderProps {
   opensearchDashboardsVersion: string;
   application: InternalApplicationStart;
@@ -93,6 +93,7 @@ export interface HeaderProps {
   branding: ChromeBranding;
   logos: Logos;
   survey: string | undefined;
+  sidecarConfig$: Observable<ISidecarConfig | undefined>;
 }
 
 export function Header({
@@ -110,6 +111,11 @@ export function Header({
   const isVisible = useObservable(observables.isVisible$, false);
   const isLocked = useObservable(observables.isLocked$, false);
   const [isNavOpen, setIsNavOpen] = useState(false);
+  const sidecarConfig = useObservable(observables.sidecarConfig$, undefined);
+
+  const sidecarPaddingStyle = useMemo(() => {
+    return getOsdSidecarPaddingStyle(sidecarConfig);
+  }, [sidecarConfig]);
 
   if (!isVisible) {
     return <LoadingIndicator loadingCount$={observables.loadingCount$} showAsBar />;
@@ -130,6 +136,7 @@ export function Header({
             <EuiHeader
               className="expandedHeader"
               theme={expandedHeaderColorScheme}
+              style={sidecarPaddingStyle}
               position="fixed"
               sections={[
                 {
@@ -168,7 +175,7 @@ export function Header({
             />
           )}
 
-          <EuiHeader position="fixed" className="primaryHeader">
+          <EuiHeader position="fixed" className="primaryHeader" style={sidecarPaddingStyle}>
             <EuiHeaderSection grow={false}>
               <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">
                 <EuiHeaderSectionItemButton
diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts
index a9dba002e44c..9fe16de8a085 100644
--- a/src/core/public/core_system.ts
+++ b/src/core/public/core_system.ts
@@ -233,6 +233,7 @@ export class CoreSystem {
         injectedMetadata,
         notifications,
         uiSettings,
+        overlays,
       });
 
       this.coreApp.start({ application, http, notifications, uiSettings });
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index 084e3c246b13..e3ef238e94e4 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -181,7 +181,13 @@ export {
   IHttpResponseInterceptorOverrides,
 } from './http';
 
-export { OverlayStart, OverlayBannersStart, OverlayRef } from './overlays';
+export {
+  OverlayStart,
+  OverlayBannersStart,
+  OverlayRef,
+  ISidecarConfig,
+  SIDECAR_DOCKED_MODE,
+} from './overlays';
 
 export {
   Toast,
diff --git a/src/core/public/overlays/index.ts b/src/core/public/overlays/index.ts
index 698d73a138df..9af24d73224d 100644
--- a/src/core/public/overlays/index.ts
+++ b/src/core/public/overlays/index.ts
@@ -33,3 +33,10 @@ export { OverlayBannersStart } from './banners';
 export { OverlayFlyoutStart, OverlayFlyoutOpenOptions } from './flyout';
 export { OverlayModalStart, OverlayModalOpenOptions } from './modal';
 export { OverlayService, OverlayStart } from './overlay_service';
+export {
+  OverlaySidecarStart,
+  OverlaySidecarOpenOptions,
+  ISidecarConfig,
+  getOsdSidecarPaddingStyle,
+  SIDECAR_DOCKED_MODE,
+} from './sidecar';
diff --git a/src/core/public/overlays/overlay_service.mock.ts b/src/core/public/overlays/overlay_service.mock.ts
index b2a4d2aea8fa..5f2d70eec5d3 100644
--- a/src/core/public/overlays/overlay_service.mock.ts
+++ b/src/core/public/overlays/overlay_service.mock.ts
@@ -33,6 +33,7 @@ import { OverlayService, OverlayStart } from './overlay_service';
 import { overlayBannersServiceMock } from './banners/banners_service.mock';
 import { overlayFlyoutServiceMock } from './flyout/flyout_service.mock';
 import { overlayModalServiceMock } from './modal/modal_service.mock';
+import { overlaySidecarServiceMock } from './sidecar/sidecar_service.mock';
 
 const createStartContractMock = () => {
   const overlayStart = overlayModalServiceMock.createStartContract();
@@ -41,6 +42,7 @@ const createStartContractMock = () => {
     openModal: overlayStart.open,
     openConfirm: overlayStart.openConfirm,
     banners: overlayBannersServiceMock.createStartContract(),
+    sidecar: overlaySidecarServiceMock.createStartContract(),
   };
   return startContract;
 };
diff --git a/src/core/public/overlays/overlay_service.ts b/src/core/public/overlays/overlay_service.ts
index 19d5d6b8b7c6..92144d34c45b 100644
--- a/src/core/public/overlays/overlay_service.ts
+++ b/src/core/public/overlays/overlay_service.ts
@@ -33,6 +33,7 @@ import { IUiSettingsClient } from '../ui_settings';
 import { OverlayBannersStart, OverlayBannersService } from './banners';
 import { FlyoutService, OverlayFlyoutStart } from './flyout';
 import { ModalService, OverlayModalStart } from './modal';
+import { SidecarService, OverlaySidecarStart } from './sidecar';
 
 interface StartDeps {
   i18n: I18nStart;
@@ -45,6 +46,7 @@ export class OverlayService {
   private bannersService = new OverlayBannersService();
   private modalService = new ModalService();
   private flyoutService = new FlyoutService();
+  private sidecarService = new SidecarService();
 
   public start({ i18n, targetDomElement, uiSettings }: StartDeps): OverlayStart {
     const flyoutElement = document.createElement('div');
@@ -56,12 +58,19 @@ export class OverlayService {
     const modalElement = document.createElement('div');
     targetDomElement.appendChild(modalElement);
     const modals = this.modalService.start({ i18n, targetDomElement: modalElement });
+    const sidecarElement = document.createElement('div');
+    targetDomElement.appendChild(sidecarElement);
+    const sidecars = this.sidecarService.start({
+      i18n,
+      targetDomElement: sidecarElement,
+    });
 
     return {
       banners,
       openFlyout: flyouts.open.bind(flyouts),
       openModal: modals.open.bind(modals),
       openConfirm: modals.openConfirm.bind(modals),
+      sidecar: sidecars,
     };
   }
 }
@@ -76,4 +85,6 @@ export interface OverlayStart {
   openModal: OverlayModalStart['open'];
   /** {@link OverlayModalStart#openConfirm} */
   openConfirm: OverlayModalStart['openConfirm'];
+  /** {@link OverlaySidecarStart#open} */
+  sidecar: OverlaySidecarStart;
 }
diff --git a/src/core/public/overlays/sidecar/__snapshots__/sidecar_service.test.tsx.snap b/src/core/public/overlays/sidecar/__snapshots__/sidecar_service.test.tsx.snap
new file mode 100644
index 000000000000..95d617b3acfe
--- /dev/null
+++ b/src/core/public/overlays/sidecar/__snapshots__/sidecar_service.test.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SidecarService SidecarRef#Hide() hide the sidecar when calling hide  1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight osdSidecarFlyout--hide\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
+
+exports[`SidecarService SidecarRef#Show() recover sidecar when calling show after calling hide 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
+
+exports[`SidecarService SidecarRef#close() can be called multiple times on the same SidecarRef 1`] = `
+Array [
+  Array [
+    <div />,
+  ],
+]
+`;
+
+exports[`SidecarService open sidecar does not unmount if targetDom is null 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
+
+exports[`SidecarService open sidecar renders a sidecar to the DOM 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
+
+exports[`SidecarService open sidecar with a currently active sidecar replaces the current sidecar with a new one 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content 2</span></div></div>"`;
diff --git a/src/core/public/overlays/sidecar/components/__snapshots__/resizable_button.test.tsx.snap b/src/core/public/overlays/sidecar/components/__snapshots__/resizable_button.test.tsx.snap
new file mode 100644
index 000000000000..9407e6c6956b
--- /dev/null
+++ b/src/core/public/overlays/sidecar/components/__snapshots__/resizable_button.test.tsx.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`is rendered 1`] = `
+<button
+  className="sidecar-resizableButton resizableButton--horizontal"
+  data-test-subj="resizableButton"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+  onTouchStart={[Function]}
+  type="button"
+/>
+`;
+
+exports[`it should be horizontal when docked mode is right 1`] = `
+<button
+  className="sidecar-resizableButton resizableButton--horizontal"
+  data-test-subj="resizableButton"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+  onTouchStart={[Function]}
+  type="button"
+/>
+`;
+
+exports[`it should be vertical when docked mode is takeover 1`] = `
+<button
+  className="sidecar-resizableButton resizableButton--vertical"
+  data-test-subj="resizableButton"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+  onTouchStart={[Function]}
+  type="button"
+/>
+`;
+
+exports[`it should emit onResize with min size when drag if new size is below the minimum 1`] = `
+<button
+  className="sidecar-resizableButton resizableButton--horizontal"
+  data-test-subj="resizableButton"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+  onTouchStart={[Function]}
+  type="button"
+/>
+`;
+
+exports[`it should emit onResize with new flyout size when docked left and drag and horizontal 1`] = `
+<button
+  className="sidecar-resizableButton resizableButton--horizontal"
+  data-test-subj="resizableButton"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+  onTouchStart={[Function]}
+  type="button"
+/>
+`;
+
+exports[`it should emit onResize with new flyout size when docked right and drag and horizontal 1`] = `
+<button
+  className="sidecar-resizableButton resizableButton--horizontal"
+  data-test-subj="resizableButton"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+  onTouchStart={[Function]}
+  type="button"
+/>
+`;
+
+exports[`it should emit onResize with new flyout size when drag and vertical 1`] = `
+<button
+  className="sidecar-resizableButton resizableButton--vertical"
+  data-test-subj="resizableButton"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+  onTouchStart={[Function]}
+  type="button"
+/>
+`;
diff --git a/src/core/public/overlays/sidecar/components/__snapshots__/sidecar.test.tsx.snap b/src/core/public/overlays/sidecar/components/__snapshots__/sidecar.test.tsx.snap
new file mode 100644
index 000000000000..25364ab42740
--- /dev/null
+++ b/src/core/public/overlays/sidecar/components/__snapshots__/sidecar.test.tsx.snap
@@ -0,0 +1,1594 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sidecar component is rendered 1`] = `
+<div
+  class="osdSidecarFlyout"
+  data-test-subj="sidecar-component-wrapper"
+>
+  <button
+    class="sidecar-resizableButton resizableButton--horizontal"
+    data-test-subj="resizableButton"
+    type="button"
+  />
+  <div
+    class="osdSidecarMountWrapper"
+  />
+</div>
+`;
+
+exports[`Sidecar component it should emit setSidecarConfig with new style when resize 1`] = `
+<Sidecar
+  i18n={
+    Object {
+      "Context": [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+            Object {
+              "enqueueForceUpdate": [Function],
+              "enqueueReplaceState": [Function],
+              "enqueueSetState": [Function],
+              "isMounted": [Function],
+            },
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="right"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="right"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+        ],
+      },
+    }
+  }
+  mount={[Function]}
+  options={
+    Object {
+      "data-test-subj": "sidecar-component-wrapper",
+    }
+  }
+  setSidecarConfig={[MockFunction]}
+  sidecarConfig$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "dockedMode": "right",
+        "isHidden": false,
+        "paddingSize": 460,
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+>
+  <mockConstructor>
+    <div
+      className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+      data-test-subj="sidecar-component-wrapper"
+      style={
+        Object {
+          "width": 460,
+        }
+      }
+    >
+      <ResizableButton
+        dockedMode="right"
+        flyoutSize={460}
+        onResize={[Function]}
+      >
+        <button
+          className="sidecar-resizableButton resizableButton--horizontal"
+          data-test-subj="resizableButton"
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+          type="button"
+        />
+      </ResizableButton>
+      <MountWrapper
+        className="osdSidecarMountWrapper"
+        mount={[Function]}
+      >
+        <div
+          className="osdSidecarMountWrapper"
+        />
+      </MountWrapper>
+    </div>
+  </mockConstructor>
+</Sidecar>
+`;
+
+exports[`Sidecar component it should have a height style when dockedDirection is takeover 1`] = `
+<Sidecar
+  i18n={
+    Object {
+      "Context": [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+            Object {
+              "enqueueForceUpdate": [Function],
+              "enqueueReplaceState": [Function],
+              "enqueueSetState": [Function],
+              "isMounted": [Function],
+            },
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="right"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="right"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedTakeover"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "height": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="takeover"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="right"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="right"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedTakeover"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "height": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="takeover"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+        ],
+      },
+    }
+  }
+  mount={[Function]}
+  options={
+    Object {
+      "data-test-subj": "sidecar-component-wrapper",
+    }
+  }
+  setSidecarConfig={[MockFunction]}
+  sidecarConfig$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "dockedMode": "takeover",
+        "isHidden": false,
+        "paddingSize": 460,
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+>
+  <mockConstructor>
+    <div
+      className="osdSidecarFlyout osdSidecarFlyout--dockedTakeover"
+      data-test-subj="sidecar-component-wrapper"
+      style={
+        Object {
+          "height": 460,
+        }
+      }
+    >
+      <ResizableButton
+        dockedMode="takeover"
+        flyoutSize={460}
+        onResize={[Function]}
+      >
+        <button
+          className="sidecar-resizableButton resizableButton--vertical"
+          data-test-subj="resizableButton"
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+          type="button"
+        />
+      </ResizableButton>
+      <MountWrapper
+        className="osdSidecarMountWrapper"
+        mount={[Function]}
+      >
+        <div
+          className="osdSidecarMountWrapper"
+        />
+      </MountWrapper>
+    </div>
+  </mockConstructor>
+</Sidecar>
+`;
+
+exports[`Sidecar component it should have a height style when isHidden is true 1`] = `
+<Sidecar
+  i18n={
+    Object {
+      "Context": [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+            Object {
+              "enqueueForceUpdate": [Function],
+              "enqueueReplaceState": [Function],
+              "enqueueSetState": [Function],
+              "isMounted": [Function],
+            },
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="right"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="right"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedTakeover"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "height": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="takeover"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedTakeover osdSidecarFlyout--hide"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "height": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="takeover"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="right"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="right"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedTakeover"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "height": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="takeover"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedTakeover osdSidecarFlyout--hide"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "height": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="takeover"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+        ],
+      },
+    }
+  }
+  mount={[Function]}
+  options={
+    Object {
+      "data-test-subj": "sidecar-component-wrapper",
+    }
+  }
+  setSidecarConfig={[MockFunction]}
+  sidecarConfig$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "dockedMode": "takeover",
+        "isHidden": true,
+        "paddingSize": 460,
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+>
+  <mockConstructor>
+    <div
+      className="osdSidecarFlyout osdSidecarFlyout--dockedTakeover osdSidecarFlyout--hide"
+      data-test-subj="sidecar-component-wrapper"
+      style={
+        Object {
+          "height": 460,
+        }
+      }
+    >
+      <ResizableButton
+        dockedMode="takeover"
+        flyoutSize={460}
+        onResize={[Function]}
+      >
+        <button
+          className="sidecar-resizableButton resizableButton--vertical"
+          data-test-subj="resizableButton"
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+          type="button"
+        />
+      </ResizableButton>
+      <MountWrapper
+        className="osdSidecarMountWrapper"
+        mount={[Function]}
+      >
+        <div
+          className="osdSidecarMountWrapper"
+        />
+      </MountWrapper>
+    </div>
+  </mockConstructor>
+</Sidecar>
+`;
+
+exports[`Sidecar component it should have a width style when dockedDirection is right 1`] = `
+<Sidecar
+  i18n={
+    Object {
+      "Context": [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+            Object {
+              "enqueueForceUpdate": [Function],
+              "enqueueReplaceState": [Function],
+              "enqueueSetState": [Function],
+              "isMounted": [Function],
+            },
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="right"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <ResizableButton
+                  flyoutSize={0}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+          Array [
+            Object {
+              "children": <div
+                className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+                data-test-subj="sidecar-component-wrapper"
+                style={
+                  Object {
+                    "width": 460,
+                  }
+                }
+              >
+                <ResizableButton
+                  dockedMode="right"
+                  flyoutSize={460}
+                  onResize={[Function]}
+                />
+                <MountWrapper
+                  className="osdSidecarMountWrapper"
+                  mount={[Function]}
+                />
+              </div>,
+            },
+            Object {},
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="right"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": undefined,
+                }
+              }
+            >
+              <ResizableButton
+                flyoutSize={0}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+          Object {
+            "type": "return",
+            "value": <div
+              className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+              data-test-subj="sidecar-component-wrapper"
+              style={
+                Object {
+                  "width": 460,
+                }
+              }
+            >
+              <ResizableButton
+                dockedMode="right"
+                flyoutSize={460}
+                onResize={[Function]}
+              />
+              <MountWrapper
+                className="osdSidecarMountWrapper"
+                mount={[Function]}
+              />
+            </div>,
+          },
+        ],
+      },
+    }
+  }
+  mount={[Function]}
+  options={
+    Object {
+      "data-test-subj": "sidecar-component-wrapper",
+    }
+  }
+  setSidecarConfig={[MockFunction]}
+  sidecarConfig$={
+    BehaviorSubject {
+      "_isScalar": false,
+      "_value": Object {
+        "dockedMode": "right",
+        "isHidden": false,
+        "paddingSize": 460,
+      },
+      "closed": false,
+      "hasError": false,
+      "isStopped": false,
+      "observers": Array [
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+        Subscriber {
+          "_parentOrParents": null,
+          "_subscriptions": Array [
+            SubjectSubscription {
+              "_parentOrParents": [Circular],
+              "_subscriptions": null,
+              "closed": false,
+              "subject": [Circular],
+              "subscriber": [Circular],
+            },
+          ],
+          "closed": false,
+          "destination": SafeSubscriber {
+            "_complete": undefined,
+            "_context": [Circular],
+            "_error": undefined,
+            "_next": [Function],
+            "_parentOrParents": null,
+            "_parentSubscriber": [Circular],
+            "_subscriptions": null,
+            "closed": false,
+            "destination": Object {
+              "closed": true,
+              "complete": [Function],
+              "error": [Function],
+              "next": [Function],
+            },
+            "isStopped": false,
+            "syncErrorThrowable": false,
+            "syncErrorThrown": false,
+            "syncErrorValue": null,
+          },
+          "isStopped": false,
+          "syncErrorThrowable": true,
+          "syncErrorThrown": false,
+          "syncErrorValue": null,
+        },
+      ],
+      "thrownError": null,
+    }
+  }
+>
+  <mockConstructor>
+    <div
+      className="osdSidecarFlyout osdSidecarFlyout--dockedRight"
+      data-test-subj="sidecar-component-wrapper"
+      style={
+        Object {
+          "width": 460,
+        }
+      }
+    >
+      <ResizableButton
+        dockedMode="right"
+        flyoutSize={460}
+        onResize={[Function]}
+      >
+        <button
+          className="sidecar-resizableButton resizableButton--horizontal"
+          data-test-subj="resizableButton"
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+          type="button"
+        />
+      </ResizableButton>
+      <MountWrapper
+        className="osdSidecarMountWrapper"
+        mount={[Function]}
+      >
+        <div
+          className="osdSidecarMountWrapper"
+        />
+      </MountWrapper>
+    </div>
+  </mockConstructor>
+</Sidecar>
+`;
diff --git a/src/core/public/overlays/sidecar/components/resizable_button.scss b/src/core/public/overlays/sidecar/components/resizable_button.scss
new file mode 100644
index 000000000000..2473b49455f6
--- /dev/null
+++ b/src/core/public/overlays/sidecar/components/resizable_button.scss
@@ -0,0 +1,131 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.sidecar-resizableButton {
+  position: relative;
+  flex-shrink: 0;
+  z-index: $euiZLevel1;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background-color: $euiColorDarkestShade;
+    transition:
+      (width $euiAnimSpeedFast ease,
+      height $euiAnimSpeedFast ease,
+      transform $euiAnimSpeedFast ease,
+      background-color $euiAnimSpeedFast ease);
+  }
+
+  &.resizableButton--horizontal {
+    cursor: col-resize;
+    width: $euiSize;
+    margin-left: calc(-1 * $euiSize / 2);
+    margin-right: calc(-1 * $euiSize / 2);
+
+    &::before,
+    &::after {
+      width: 1px;
+      height: $euiSizeM;
+    }
+
+    &::before {
+      transform: translate(-2px, -50%);
+    }
+
+    &::after {
+      transform: translate(1px, -50%);
+    }
+  }
+
+  &.resizableButton--vertical {
+    cursor: row-resize;
+    height: $euiSize;
+    margin-top: calc(-1 * $euiSize / 2);
+    margin-bottom: calc(-1 * $euiSize / 2);
+
+    &::before,
+    &::after {
+      width: $euiSizeM;
+      height: 1px;
+    }
+
+    &::before {
+      transform: translate(-50%, -2px);
+    }
+
+    &::after {
+      transform: translate(-50%, 1px);
+    }
+  }
+
+  // Lighten the "grab" icon on :hover
+  &:hover:not(:disabled) {
+    &::before,
+    &::after {
+      background-color: $euiColorMediumShade;
+      transition-delay: $euiAnimSpeedFast;
+    }
+  }
+
+  // Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
+  &:focus:not(:disabled) {
+    background-color: transparentize($euiColorPrimary, 0.9);
+
+    &::before,
+    &::after {
+      background-color: $euiColorPrimary;
+
+      // Overrides default transition so that "grab" icon background-color doesn't animate
+      transition:
+        (width $euiAnimSpeedFast ease,
+        height $euiAnimSpeedFast ease,
+        transform $euiAnimSpeedFast ease);
+      transition-delay: calc($euiAnimSpeedFast / 2);
+    }
+  }
+
+  // Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
+  &:hover:not(:disabled),
+  &:focus:not(:disabled) {
+    &.resizableButton--horizontal {
+      &::before,
+      &::after {
+        height: 100%;
+      }
+
+      &::before {
+        transform: translate(-1px, -50%);
+      }
+
+      &::after {
+        transform: translate(0, -50%);
+      }
+    }
+
+    &.resizableButton--vertical {
+      &::before,
+      &::after {
+        width: 100%;
+      }
+
+      &::before {
+        transform: translate(-50%, -1px);
+      }
+
+      &::after {
+        transform: translate(-50%, 0);
+      }
+    }
+  }
+
+  &:disabled {
+    display: none !important; // sass-lint:disable-line no-important
+  }
+}
diff --git a/src/core/public/overlays/sidecar/components/resizable_button.test.tsx b/src/core/public/overlays/sidecar/components/resizable_button.test.tsx
new file mode 100644
index 000000000000..c388c3cffd46
--- /dev/null
+++ b/src/core/public/overlays/sidecar/components/resizable_button.test.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+import { ResizableButton, MIN_SIDECAR_SIZE } from './resizable_button';
+import { shallow } from 'enzyme';
+import { SIDECAR_DOCKED_MODE } from '../sidecar_service';
+
+const storeWindowEvents = () => {
+  const map: Record<string, Function> = {};
+  window.addEventListener = jest.fn().mockImplementation((event: string, cb) => {
+    map[event] = cb;
+  });
+  return map;
+};
+
+const DEFAULT_FLYOUT_SIZE = 460;
+const props = {
+  dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+  onResize: jest.fn(),
+  flyoutSize: DEFAULT_FLYOUT_SIZE,
+};
+
+test('is rendered', () => {
+  const component = shallow(<ResizableButton {...props} />);
+  expect(component).toMatchSnapshot();
+});
+
+test('it should be horizontal when docked mode is right', () => {
+  const component = shallow(<ResizableButton {...props} />);
+  expect(component.hasClass('resizableButton--horizontal')).toBe(true);
+  expect(component.hasClass('resizableButton--vertical')).toBe(false);
+  expect(component).toMatchSnapshot();
+});
+
+test('it should be vertical when docked mode is takeover', () => {
+  const newProps = { ...props, dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER };
+  const component = shallow(<ResizableButton {...newProps} />);
+  expect(component.hasClass('resizableButton--vertical')).toBe(true);
+  expect(component.hasClass('resizableButton--horizontal')).toBe(false);
+  expect(component).toMatchSnapshot();
+});
+
+test('it should emit onResize with new flyout size when docked right and drag and horizontal', () => {
+  const windowEvents = storeWindowEvents();
+
+  const onResize = jest.fn();
+  const newProps = { ...props, onResize };
+  const component = shallow(<ResizableButton {...newProps} />);
+  const resizer = component.find(`[data-test-subj~="resizableButton"]`).first();
+  expect(onResize).not.toHaveBeenCalled();
+  resizer.simulate('mousedown', { clientX: 0, pageX: 0, pageY: 0 });
+  windowEvents?.mousemove({ clientX: -1000, pageX: 0, pageY: 0 });
+  windowEvents?.mouseup();
+  const newSize = 1000 + DEFAULT_FLYOUT_SIZE;
+  expect(onResize).toHaveBeenCalledWith(newSize);
+  expect(component).toMatchSnapshot();
+});
+
+test('it should emit onResize with new flyout size when docked left and drag and horizontal', () => {
+  const windowEvents = storeWindowEvents();
+
+  const onResize = jest.fn();
+  const newProps = { ...props, onResize, dockedMode: SIDECAR_DOCKED_MODE.LEFT };
+  const component = shallow(<ResizableButton {...newProps} />);
+  const resizer = component.find(`[data-test-subj~="resizableButton"]`).first();
+  expect(onResize).not.toHaveBeenCalled();
+  resizer.simulate('mousedown', { clientX: 0, pageX: 0, pageY: 0 });
+  windowEvents?.mousemove({ clientX: 1000, pageX: 0, pageY: 0 });
+  windowEvents?.mouseup();
+  const newSize = 1000 + DEFAULT_FLYOUT_SIZE;
+  expect(onResize).toHaveBeenCalledWith(newSize);
+  expect(component).toMatchSnapshot();
+});
+
+test('it should emit onResize with new flyout size when drag and vertical', () => {
+  const windowEvents = storeWindowEvents();
+
+  const onResize = jest.fn();
+  const newProps = { ...props, onResize, dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER };
+  const component = shallow(<ResizableButton {...newProps} />);
+  const resizer = component.find(`[data-test-subj~="resizableButton"]`).first();
+  expect(onResize).not.toHaveBeenCalled();
+  resizer.simulate('mousedown', { clientY: 0, pageX: 0, pageY: 0 });
+  windowEvents?.mousemove({ clientY: -1000, pageX: 0, pageY: 0 });
+  windowEvents?.mouseup();
+  const newSize = 1000 + DEFAULT_FLYOUT_SIZE;
+  expect(onResize).toHaveBeenCalledWith(newSize);
+  expect(component).toMatchSnapshot();
+});
+
+test('it should emit onResize with min size when drag if new size is below the minimum', () => {
+  const windowEvents = storeWindowEvents();
+  const onResize = jest.fn();
+  const newProps = { ...props, onResize };
+  const component = shallow(<ResizableButton {...newProps} />);
+  const resizer = component.find(`[data-test-subj~="resizableButton"]`).first();
+  expect(onResize).not.toHaveBeenCalled();
+  resizer.simulate('mousedown', { clientX: 0, pageX: 0, pageY: 0 });
+  windowEvents?.mousemove({ clientX: 1000, pageX: 0, pageY: 0 });
+  windowEvents?.mouseup();
+  const newSize = MIN_SIDECAR_SIZE;
+  expect(onResize).toHaveBeenCalledWith(newSize);
+  expect(component).toMatchSnapshot();
+});
diff --git a/src/core/public/overlays/sidecar/components/resizable_button.tsx b/src/core/public/overlays/sidecar/components/resizable_button.tsx
new file mode 100644
index 000000000000..830a0c00ba96
--- /dev/null
+++ b/src/core/public/overlays/sidecar/components/resizable_button.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useRef } from 'react';
+import classNames from 'classnames';
+import './resizable_button.scss';
+import { getPosition } from '../helper';
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../sidecar_service';
+
+interface Props {
+  onResize: (size: number) => void;
+  flyoutSize: number;
+  dockedMode: ISidecarConfig['dockedMode'] | undefined;
+}
+
+export const MIN_SIDECAR_SIZE = 350;
+
+export const ResizableButton = ({ dockedMode, onResize, flyoutSize }: Props) => {
+  const isHorizontal = dockedMode !== SIDECAR_DOCKED_MODE.TAKEOVER;
+
+  const classes = classNames('sidecar-resizableButton', {
+    'resizableButton--vertical': !isHorizontal,
+    'resizableButton--horizontal': isHorizontal,
+  });
+
+  const initialMouseXorY = useRef(0);
+  const initialFlyoutSize = useRef(flyoutSize);
+  const setFocus = (e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.focus();
+
+  const onMouseDown = useCallback(
+    (event: React.MouseEvent | React.TouchEvent) => {
+      const onMouseUp = () => {
+        initialMouseXorY.current = 0;
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+        window.removeEventListener('touchmove', onMouseMove);
+        window.removeEventListener('touchend', onMouseUp);
+      };
+      const onMouseMove = (e: MouseEvent | TouchEvent) => {
+        let offset;
+        if (dockedMode === SIDECAR_DOCKED_MODE.LEFT) {
+          offset = getPosition(e, isHorizontal) - initialMouseXorY.current;
+        } else {
+          offset = initialMouseXorY.current - getPosition(e, isHorizontal);
+        }
+        const newFlyoutSize = initialFlyoutSize.current + offset;
+
+        onResize(Math.max(newFlyoutSize, MIN_SIDECAR_SIZE));
+      };
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+      window.addEventListener('touchmove', onMouseMove);
+      window.addEventListener('touchend', onMouseUp);
+      initialMouseXorY.current = getPosition(event, isHorizontal);
+      initialFlyoutSize.current = flyoutSize;
+    },
+    [isHorizontal, flyoutSize, dockedMode, onResize]
+  );
+
+  return (
+    <button
+      className={classes}
+      data-test-subj="resizableButton"
+      type="button"
+      onClick={setFocus}
+      onMouseDown={onMouseDown}
+      onTouchStart={onMouseDown}
+    />
+  );
+};
diff --git a/src/core/public/overlays/sidecar/components/sidecar.scss b/src/core/public/overlays/sidecar/components/sidecar.scss
new file mode 100644
index 000000000000..1878b92b5074
--- /dev/null
+++ b/src/core/public/overlays/sidecar/components/sidecar.scss
@@ -0,0 +1,44 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.osdSidecarFlyout {
+  box-shadow: initial;
+  position: fixed;
+  z-index: 1000;
+  background: lightOrDarkTheme($euiColorGhost, $euiColorInk);
+  display: flex;
+
+  &.osdSidecarFlyout--dockedRight {
+    top: 0;
+    height: 100vh;
+    right: 0;
+    flex-direction: row;
+    padding-left: 8px;
+  }
+
+  &.osdSidecarFlyout--dockedLeft {
+    top: 0;
+    height: 100vh;
+    left: 0;
+    flex-direction: row-reverse;
+    padding-right: 8px;
+  }
+
+  &.osdSidecarFlyout--dockedTakeover {
+    width: 100vw !important;
+    bottom: 0;
+    flex-direction: column;
+    padding-top: 8px;
+  }
+
+  &.osdSidecarFlyout--hide {
+    display: none;
+  }
+
+  .osdSidecarMountWrapper {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/core/public/overlays/sidecar/components/sidecar.test.tsx b/src/core/public/overlays/sidecar/components/sidecar.test.tsx
new file mode 100644
index 000000000000..88d7d1d0277a
--- /dev/null
+++ b/src/core/public/overlays/sidecar/components/sidecar.test.tsx
@@ -0,0 +1,114 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+
+import { render, mount } from 'enzyme';
+import { BehaviorSubject } from 'rxjs';
+
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../sidecar_service';
+import { Sidecar, Props } from './sidecar';
+import { i18nServiceMock } from '../../../i18n/i18n_service.mock';
+
+const i18nMock = i18nServiceMock.createStartContract();
+const mountText = (text: string) => (container: HTMLElement) => {
+  const content = document.createElement('span');
+  content.textContent = text;
+  container.append(content);
+  return () => {};
+};
+
+const storeWindowEvents = () => {
+  const map: Record<string, Function> = {};
+  window.addEventListener = jest.fn().mockImplementation((event: string, cb) => {
+    map[event] = cb;
+  });
+  return map;
+};
+
+const DEFAULT_FLYOUT_SIZE = 460;
+const props = {
+  sidecarConfig$: new BehaviorSubject<ISidecarConfig>({
+    dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+    paddingSize: DEFAULT_FLYOUT_SIZE,
+    isHidden: false,
+  }),
+  options: {
+    'data-test-subj': 'sidecar-component-wrapper',
+  },
+  setSidecarConfig: jest.fn(),
+  i18n: i18nMock,
+  mount: mountText('sidecar content'),
+};
+
+describe('Sidecar component', () => {
+  test('is rendered', () => {
+    const component = render(<Sidecar {...((props as unknown) as Props)} />);
+    expect(component).toMatchSnapshot();
+  });
+
+  test('it should emit setSidecarConfig with new style when resize', () => {
+    const setSidecarConfig = jest.fn();
+    const newProps = {
+      ...props,
+      setSidecarConfig,
+    };
+    const windowEvents = storeWindowEvents();
+    const component = mount(<Sidecar {...((newProps as unknown) as Props)} />);
+    expect(component).toMatchSnapshot();
+    expect(setSidecarConfig).not.toHaveBeenCalled();
+    const resizer = component.find(`[data-test-subj~="resizableButton"]`).first();
+    resizer.simulate('mousedown', { clientX: 0, pageX: 0, pageY: 0 });
+    windowEvents?.mousemove({ clientX: -1000, pageX: 0, pageY: 0 });
+    windowEvents?.mouseup();
+    expect(setSidecarConfig).toHaveBeenCalledWith({ paddingSize: 1000 + DEFAULT_FLYOUT_SIZE });
+  });
+
+  test('it should have a width style when dockedDirection is right', () => {
+    const component = mount(<Sidecar {...((props as unknown) as Props)} />);
+    expect(component).toMatchSnapshot();
+    const wrapperProps = component.find(`[data-test-subj~="sidecar-component-wrapper"]`).get(0)
+      .props;
+    expect(wrapperProps.style).toHaveProperty('width', DEFAULT_FLYOUT_SIZE);
+    expect(wrapperProps.style).not.toHaveProperty('height');
+  });
+
+  test('it should have a height style when dockedDirection is takeover', () => {
+    const newProps = {
+      ...props,
+      sidecarConfig$: new BehaviorSubject<ISidecarConfig>({
+        dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER,
+        paddingSize: DEFAULT_FLYOUT_SIZE,
+        isHidden: false,
+      }),
+    };
+
+    const component = mount(<Sidecar {...((newProps as unknown) as Props)} />);
+    expect(component).toMatchSnapshot();
+    const wrapperProps = component.find(`[data-test-subj~="sidecar-component-wrapper"]`).get(0)
+      .props;
+    expect(wrapperProps.style).toHaveProperty('height', DEFAULT_FLYOUT_SIZE);
+    expect(wrapperProps.style).not.toHaveProperty('width');
+  });
+
+  test('it should have a height style when isHidden is true', () => {
+    const newProps = {
+      ...props,
+      sidecarConfig$: new BehaviorSubject<ISidecarConfig>({
+        dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER,
+        paddingSize: DEFAULT_FLYOUT_SIZE,
+        isHidden: true,
+      }),
+    };
+
+    const component = mount(<Sidecar {...((newProps as unknown) as Props)} />);
+    expect(component).toMatchSnapshot();
+    expect(
+      component
+        .find(`[data-test-subj~="sidecar-component-wrapper"]`)
+        .hasClass('osdSidecarFlyout--hide')
+    );
+  });
+});
diff --git a/src/core/public/overlays/sidecar/components/sidecar.tsx b/src/core/public/overlays/sidecar/components/sidecar.tsx
new file mode 100644
index 000000000000..7eec0f666412
--- /dev/null
+++ b/src/core/public/overlays/sidecar/components/sidecar.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { BehaviorSubject } from 'rxjs';
+import classNames from 'classnames';
+import { I18nStart } from '../../../i18n';
+import { MountPoint } from '../../../types';
+import { MountWrapper } from '../../../utils';
+import './sidecar.scss';
+import { ResizableButton } from './resizable_button';
+import { ISidecarConfig, OverlaySidecarOpenOptions, SIDECAR_DOCKED_MODE } from '../sidecar_service';
+
+export interface Props {
+  sidecarConfig$: BehaviorSubject<ISidecarConfig | undefined>;
+  options: OverlaySidecarOpenOptions;
+  setSidecarConfig: (config: Partial<ISidecarConfig>) => void;
+  i18n: I18nStart;
+  mount: MountPoint;
+}
+
+export const Sidecar = ({ sidecarConfig$, options, setSidecarConfig, i18n, mount }: Props) => {
+  const sidecarConfig = useObservable(sidecarConfig$, undefined);
+
+  const classes = classNames(
+    'osdSidecarFlyout',
+    {
+      'osdSidecarFlyout--dockedRight': sidecarConfig?.dockedMode === SIDECAR_DOCKED_MODE.RIGHT,
+      'osdSidecarFlyout--dockedLeft': sidecarConfig?.dockedMode === SIDECAR_DOCKED_MODE.LEFT,
+      'osdSidecarFlyout--dockedTakeover':
+        sidecarConfig?.dockedMode === SIDECAR_DOCKED_MODE.TAKEOVER,
+      'osdSidecarFlyout--hide': sidecarConfig?.isHidden === true,
+    },
+    options.className
+  );
+  const handleResize = useCallback(
+    (newSize: number) => {
+      setSidecarConfig({
+        paddingSize: newSize,
+      });
+    },
+    [setSidecarConfig]
+  );
+
+  const flyoutSizeStyle = useMemo(
+    () =>
+      sidecarConfig?.dockedMode === SIDECAR_DOCKED_MODE.TAKEOVER
+        ? {
+            height: sidecarConfig?.paddingSize,
+          }
+        : {
+            width: sidecarConfig?.paddingSize,
+          },
+    [sidecarConfig]
+  );
+
+  return (
+    <i18n.Context>
+      <div data-test-subj={options['data-test-subj']} style={flyoutSizeStyle} className={classes}>
+        <ResizableButton
+          onResize={handleResize}
+          dockedMode={sidecarConfig?.dockedMode}
+          flyoutSize={sidecarConfig?.paddingSize ?? 0}
+        />
+        <MountWrapper mount={mount} className="osdSidecarMountWrapper" />
+      </div>
+    </i18n.Context>
+  );
+};
diff --git a/src/core/public/overlays/sidecar/helper.test.ts b/src/core/public/overlays/sidecar/helper.test.ts
new file mode 100644
index 000000000000..a599d34d82d6
--- /dev/null
+++ b/src/core/public/overlays/sidecar/helper.test.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { getPosition, getOsdSidecarPaddingStyle } from './helper';
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from './sidecar_service';
+
+describe('sidecar helper', () => {
+  describe('getPosition', () => {
+    test('return clientX for mouse event when horizontal', () => {
+      expect(
+        getPosition({ clientX: 1, clientY: 2, pageX: 0, pageY: 0 } as MouseEvent, true)
+      ).toEqual(1);
+    });
+    test('return clientY for mouse event when not horizontal', () => {
+      expect(
+        getPosition({ clientX: 1, clientY: 2, pageX: 0, pageY: 0 } as MouseEvent, false)
+      ).toEqual(2);
+    });
+
+    test('return clientX for touch event when horizontal', () => {
+      expect(
+        getPosition(({ touches: [{ clientX: 1, clientY: 2 }] } as unknown) as TouchEvent, true)
+      ).toEqual(1);
+    });
+    test('return clientY for touch event when not horizontal', () => {
+      expect(
+        getPosition(({ touches: [{ clientX: 1, clientY: 2 }] } as unknown) as TouchEvent, false)
+      ).toEqual(2);
+    });
+  });
+  describe('getOsdSidecarPaddingStyle', () => {
+    const props: ISidecarConfig = {
+      paddingSize: 460,
+      dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+      isHidden: false,
+    };
+
+    test('return paddingRight style object when dockedMode is right ', () => {
+      expect(
+        getOsdSidecarPaddingStyle({ ...props, dockedMode: SIDECAR_DOCKED_MODE.RIGHT })
+      ).toEqual({ paddingRight: 460 });
+    });
+
+    test('return paddingLeft style object when dockedMode is left ', () => {
+      expect(
+        getOsdSidecarPaddingStyle({ ...props, dockedMode: SIDECAR_DOCKED_MODE.LEFT })
+      ).toEqual({ paddingLeft: 460 });
+    });
+
+    test('return null object when isHidden is true ', () => {
+      expect(getOsdSidecarPaddingStyle({ ...props, isHidden: true })).toEqual({});
+    });
+
+    test('return null object when dockedMode is takeover ', () => {
+      expect(
+        getOsdSidecarPaddingStyle({ ...props, dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER })
+      ).toEqual({});
+    });
+  });
+});
diff --git a/src/core/public/overlays/sidecar/helper.ts b/src/core/public/overlays/sidecar/helper.ts
new file mode 100644
index 000000000000..2c37ac37bdcc
--- /dev/null
+++ b/src/core/public/overlays/sidecar/helper.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from './sidecar_service';
+
+function isMouseEvent(
+  event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent
+): event is MouseEvent | React.MouseEvent {
+  return typeof event === 'object' && 'pageX' in event && 'pageY' in event;
+}
+
+export const getPosition = (
+  event: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent,
+  isHorizontal: boolean
+) => {
+  const clientX = isMouseEvent(event) ? event.clientX : event.touches[0].clientX;
+  const clientY = isMouseEvent(event) ? event.clientY : event.touches[0].clientY;
+  return isHorizontal ? clientX : clientY;
+};
+
+export const getOsdSidecarPaddingStyle = (config: ISidecarConfig | undefined) => {
+  if (
+    !config?.isHidden &&
+    (config?.dockedMode === SIDECAR_DOCKED_MODE.LEFT ||
+      config?.dockedMode === SIDECAR_DOCKED_MODE.RIGHT)
+  ) {
+    const { dockedMode, paddingSize } = config;
+    return {
+      [`padding${dockedMode === SIDECAR_DOCKED_MODE.LEFT ? 'Left' : 'Right'}`]: paddingSize,
+    };
+  }
+  return {};
+};
diff --git a/src/core/public/overlays/sidecar/index.ts b/src/core/public/overlays/sidecar/index.ts
new file mode 100644
index 000000000000..4feb755d4fbc
--- /dev/null
+++ b/src/core/public/overlays/sidecar/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export {
+  SidecarService,
+  OverlaySidecarStart,
+  OverlaySidecarOpenOptions,
+  ISidecarConfig,
+  SIDECAR_DOCKED_MODE,
+} from './sidecar_service';
+export { getOsdSidecarPaddingStyle } from './helper';
diff --git a/src/core/public/overlays/sidecar/sidecar_service.mock.ts b/src/core/public/overlays/sidecar/sidecar_service.mock.ts
new file mode 100644
index 000000000000..e74f00ca88cb
--- /dev/null
+++ b/src/core/public/overlays/sidecar/sidecar_service.mock.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { PublicMethodsOf } from '@osd/utility-types';
+import { SidecarService, OverlaySidecarStart } from './sidecar_service';
+import { BehaviorSubject } from 'rxjs';
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from './sidecar_service';
+
+const createStartContractMock = () => {
+  const startContract: jest.Mocked<OverlaySidecarStart> = {
+    open: jest.fn(),
+    setSidecarConfig: jest.fn(),
+    getSidecarConfig$: jest.fn().mockReturnValue(
+      new BehaviorSubject<ISidecarConfig>({
+        dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+        paddingSize: 640,
+      })
+    ),
+    hide: jest.fn(),
+    show: jest.fn(),
+  };
+  return startContract;
+};
+
+const createMock = () => {
+  const mocked: jest.Mocked<PublicMethodsOf<SidecarService>> = {
+    start: jest.fn(),
+  };
+  mocked.start.mockReturnValue(createStartContractMock());
+  return mocked;
+};
+
+export const overlaySidecarServiceMock = {
+  create: createMock,
+  createStartContract: createStartContractMock,
+};
diff --git a/src/core/public/overlays/sidecar/sidecar_service.test.tsx b/src/core/public/overlays/sidecar/sidecar_service.test.tsx
new file mode 100644
index 000000000000..b1b2d57aa641
--- /dev/null
+++ b/src/core/public/overlays/sidecar/sidecar_service.test.tsx
@@ -0,0 +1,141 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { mockReactDomRender, mockReactDomUnmount } from '../overlay.test.mocks';
+
+import { mount } from 'enzyme';
+import { i18nServiceMock } from '../../i18n/i18n_service.mock';
+import {
+  SidecarService,
+  OverlaySidecarStart,
+  OverlaySidecarOpenOptions,
+  SIDECAR_DOCKED_MODE,
+} from './sidecar_service';
+import { OverlayRef } from '../types';
+
+const i18nMock = i18nServiceMock.createStartContract();
+
+beforeEach(() => {
+  mockReactDomRender.mockClear();
+  mockReactDomUnmount.mockClear();
+});
+
+const mountText = (text: string) => (container: HTMLElement) => {
+  const content = document.createElement('span');
+  content.textContent = text;
+  container.append(content);
+  return () => {};
+};
+
+const getServiceStart = () => {
+  const service = new SidecarService();
+  return service.start({ i18n: i18nMock, targetDomElement: document.createElement('div') });
+};
+
+describe('SidecarService', () => {
+  let sidecar: OverlaySidecarStart;
+  const options: OverlaySidecarOpenOptions = {
+    config: {
+      dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+      paddingSize: 460,
+    },
+  };
+  beforeEach(() => {
+    sidecar = getServiceStart();
+  });
+
+  describe('open sidecar', () => {
+    it('renders a sidecar to the DOM', () => {
+      expect(mockReactDomRender).not.toHaveBeenCalled();
+      sidecar.open(mountText('Sidecar content'), options);
+      const content = mount(mockReactDomRender.mock.calls[0][0]);
+      expect(content.html()).toMatchSnapshot();
+    });
+
+    it('does not unmount if targetDom is null', async () => {
+      const sidecarRef = new SidecarService().start({ i18n: i18nMock, targetDomElement: null });
+      const ref = sidecarRef.open(mountText('Sidecar content'), options);
+      const content = mount(mockReactDomRender.mock.calls[0][0]);
+      expect(content.html()).toMatchSnapshot();
+      await ref.close();
+      expect(mockReactDomUnmount).not.toHaveBeenCalled();
+    });
+
+    describe('with a currently active sidecar', () => {
+      let ref1: OverlayRef;
+      beforeEach(() => {
+        ref1 = sidecar.open(mountText('Sidecar content'), options);
+      });
+      it('replaces the current sidecar with a new one', () => {
+        sidecar.open(mountText('Sidecar content 2'), options);
+        expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
+        const modalContent = mount(mockReactDomRender.mock.calls[1][0]);
+        expect(modalContent.html()).toMatchSnapshot();
+        expect(() => ref1.close()).not.toThrowError();
+        expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
+      });
+      it('resolves onClose on the previous ref', async () => {
+        const onCloseComplete = jest.fn();
+        ref1.onClose.then(onCloseComplete);
+        sidecar.open(mountText('Sidecar content 2'), options);
+        await ref1.onClose;
+        expect(onCloseComplete).toBeCalledTimes(1);
+      });
+    });
+  });
+  describe('SidecarRef#close()', () => {
+    it('resolves the onClose Promise', async () => {
+      const ref = sidecar.open(mountText('Sidecar content'), options);
+
+      const onCloseComplete = jest.fn();
+      ref.onClose.then(onCloseComplete);
+      await ref.close();
+      await ref.close();
+      expect(onCloseComplete).toHaveBeenCalledTimes(1);
+    });
+    it('can be called multiple times on the same SidecarRef', async () => {
+      const ref = sidecar.open(mountText('Sidecar content'), options);
+      expect(mockReactDomUnmount).not.toHaveBeenCalled();
+      await ref.close();
+      expect(mockReactDomUnmount.mock.calls).toMatchSnapshot();
+      await ref.close();
+      expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
+    });
+    it("on a stale Sidecar doesn't affect the active sidecar", async () => {
+      const ref1 = sidecar.open(mountText('Sidecar content 1'), options);
+      const ref2 = sidecar.open(mountText('Sidecar content 2'), options);
+      const onCloseComplete = jest.fn();
+      ref2.onClose.then(onCloseComplete);
+      mockReactDomUnmount.mockClear();
+      await ref1.close();
+      expect(mockReactDomUnmount).toBeCalledTimes(0);
+      expect(onCloseComplete).toBeCalledTimes(0);
+    });
+  });
+
+  describe('SidecarRef#Hide()', () => {
+    it('hide the sidecar when calling hide ', () => {
+      expect(mockReactDomRender).not.toHaveBeenCalled();
+      sidecar.open(mountText('Sidecar content'), options);
+      sidecar.hide();
+      const content = mount(mockReactDomRender.mock.calls[0][0]);
+      expect(content.html()).toMatchSnapshot();
+      expect(content.hasClass('osdSidecarFlyout--hide'));
+    });
+  });
+
+  describe('SidecarRef#Show()', () => {
+    it('recover sidecar when calling show after calling hide', () => {
+      expect(mockReactDomRender).not.toHaveBeenCalled();
+      sidecar.open(mountText('Sidecar content'), options);
+      sidecar.hide();
+      expect(mount(mockReactDomRender.mock.calls[0][0]).hasClass('osdSidecarFlyout--hide'));
+      sidecar.show();
+      const content = mount(mockReactDomRender.mock.calls[0][0]);
+      expect(content.html()).toMatchSnapshot();
+      expect(content.hasClass('osdSidecarFlyout--hide')).toEqual(false);
+    });
+  });
+});
diff --git a/src/core/public/overlays/sidecar/sidecar_service.tsx b/src/core/public/overlays/sidecar/sidecar_service.tsx
new file mode 100644
index 000000000000..28c00d5ed10d
--- /dev/null
+++ b/src/core/public/overlays/sidecar/sidecar_service.tsx
@@ -0,0 +1,198 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable max-classes-per-file */
+
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { BehaviorSubject, Observable, ReplaySubject, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { I18nStart } from '../../i18n';
+import { MountPoint } from '../../types';
+import { OverlayRef } from '../types';
+import { Sidecar } from './components/sidecar';
+/**
+ * A SidecarRef is a reference to an opened sidecar panel. It offers methods to
+ * close the sidecar panel again. If you open a sidecar panel you should make
+ * sure you call `close()` when it should be closed.
+ * Since a sidecar could also be closed by a user or from another sidecar being
+ * opened, you must bind to the `onClose` Promise on the Sidecar instance.
+ * The Promise will resolve whenever the sidecar was closed at which point you
+ * should discard the SidecarRef.
+ *
+ * @public
+ */
+class SidecarRef implements OverlayRef {
+  /**
+   * An Promise that will resolve once this sidecar is closed.
+   *
+   * Sidecars can close from user interaction, calling `close()` on the sidecar
+   * reference or another call to `open()` replacing your sidecar.
+   */
+  public readonly onClose: Promise<void>;
+
+  private closeSubject = new Subject<void>();
+
+  constructor() {
+    this.onClose = this.closeSubject.toPromise();
+  }
+
+  /**
+   * Closes the referenced sidecar if it's still open which in turn will
+   * resolve the `onClose` Promise. If the sidecar had already been
+   * closed this method does nothing.
+   */
+  public close(): Promise<void> {
+    if (!this.closeSubject.closed) {
+      this.closeSubject.next();
+      this.closeSubject.complete();
+    }
+    return this.onClose;
+  }
+}
+
+/**
+ * APIs to open and manage sidecar.
+ *
+ * @public
+ */
+export interface OverlaySidecarStart {
+  /**
+   * Opens a sidecar panel with the given mount point inside. You can use
+   * `close()` on the returned SidecarRef to close the sidecar.
+   *
+   * @param mount {@link MountPoint} - Mounts the children inside a sidecar panel
+   * @param options {@link OverlaySidecarOpenOptions} - options for the sidecar
+   * @return {@link SidecarRef} A reference to the opened sidecar panel.
+   */
+  open(mount: MountPoint, options: OverlaySidecarOpenOptions): SidecarRef;
+
+  /**
+   * Override the default support config
+   * @param config The updated support config
+   */
+  setSidecarConfig(config: Partial<ISidecarConfig>): void;
+
+  /**
+   * Get an observable of the current locked state of the nav drawer.
+   */
+  getSidecarConfig$(): Observable<ISidecarConfig | undefined>;
+
+  /**
+   * Hide side car.
+   */
+  hide: () => void;
+
+  /**
+   * Show side car.
+   */
+  show: () => void;
+}
+
+/**
+ * @public
+ */
+export interface OverlaySidecarOpenOptions {
+  className?: string;
+  'data-test-subj'?: string;
+  config: ISidecarConfig;
+}
+
+interface StartDeps {
+  i18n: I18nStart;
+  targetDomElement: Element | null;
+}
+
+export enum SIDECAR_DOCKED_MODE {
+  LEFT = 'left',
+  RIGHT = 'right',
+  TAKEOVER = 'takeover',
+}
+export interface ISidecarConfig {
+  // takeover mode will docked to bottom
+  dockedMode: SIDECAR_DOCKED_MODE;
+  paddingSize: number;
+  isHidden?: boolean;
+}
+
+/** @internal */
+export class SidecarService {
+  private activeSidecar: SidecarRef | null = null;
+  private targetDomElement: Element | null = null;
+  private readonly stop$ = new ReplaySubject(1);
+
+  public start({ i18n, targetDomElement }: StartDeps): OverlaySidecarStart {
+    this.targetDomElement = targetDomElement;
+    const sidecarConfig$ = new BehaviorSubject<ISidecarConfig | undefined>(undefined);
+    const getSidecarConfig$ = () => sidecarConfig$.pipe(takeUntil(this.stop$));
+
+    const setSidecarConfig = (config: Partial<ISidecarConfig>) => {
+      if (
+        sidecarConfig$.value ||
+        // init
+        (!sidecarConfig$.value && config.dockedMode && config.paddingSize)
+      ) {
+        sidecarConfig$.next({ ...sidecarConfig$.value, ...config } as ISidecarConfig);
+      }
+    };
+
+    return {
+      getSidecarConfig$,
+      setSidecarConfig,
+      open: (mount: MountPoint, options: OverlaySidecarOpenOptions): SidecarRef => {
+        // If there is an active flyout session close it before opening a new one.
+        if (this.activeSidecar) {
+          setSidecarConfig({ paddingSize: 0 });
+          this.activeSidecar.close();
+          this.cleanupDom();
+        }
+
+        const sidecar = new SidecarRef();
+        setSidecarConfig(options.config);
+
+        // If a sidecar gets closed through it's SidecarRef, remove it from the dom
+        sidecar.onClose.then(() => {
+          if (this.activeSidecar === sidecar) {
+            this.cleanupDom();
+          }
+        });
+
+        this.activeSidecar = sidecar;
+
+        render(
+          <Sidecar
+            sidecarConfig$={sidecarConfig$}
+            setSidecarConfig={setSidecarConfig}
+            options={options}
+            i18n={i18n}
+            mount={mount}
+          />,
+          this.targetDomElement
+        );
+
+        return sidecar;
+      },
+      hide: () => {
+        setSidecarConfig({ isHidden: true });
+      },
+      show: () => {
+        setSidecarConfig({ isHidden: false });
+      },
+    };
+  }
+
+  /**
+   * When using React.render to re-render content into a target DOM element, it replaces
+   * the content without invoking unmountComponentAtNode on any components within the target
+   * or their children. To avoid potential subtle bugs in child components that rely on
+   * unmounting for cleanup behavior, this function ensures proper cleanup of the DOM.
+   */
+  private cleanupDom(): void {
+    if (this.targetDomElement != null) {
+      unmountComponentAtNode(this.targetDomElement);
+      this.targetDomElement.innerHTML = '';
+    }
+    this.activeSidecar = null;
+  }
+}
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index 883b62de50ff..c72e7e32f5f4 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -1110,6 +1110,8 @@ export interface OverlayStart {
     //
     // (undocumented)
     openModal: OverlayModalStart['open'];
+    // (undocumented)
+    sidecar: OverlaySidecarStart;
 }
 
 export { PackageInfo }
diff --git a/src/core/public/rendering/app_containers.test.tsx b/src/core/public/rendering/app_containers.test.tsx
index 157253f5f757..4c90886ff7ea 100644
--- a/src/core/public/rendering/app_containers.test.tsx
+++ b/src/core/public/rendering/app_containers.test.tsx
@@ -34,16 +34,26 @@ import { mount } from 'enzyme';
 import React from 'react';
 
 import { AppWrapper, AppContainer } from './app_containers';
+import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../overlays';
 
 describe('AppWrapper', () => {
   it('toggles the `hidden-chrome` class depending on the chrome visibility state', () => {
     const chromeVisible$ = new BehaviorSubject<boolean>(true);
+    const sidecarConfig$ = new BehaviorSubject<ISidecarConfig>({
+      dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+      paddingSize: 640,
+    });
 
-    const component = mount(<AppWrapper chromeVisible$={chromeVisible$}>app-content</AppWrapper>);
+    const component = mount(
+      <AppWrapper chromeVisible$={chromeVisible$} sidecarConfig$={sidecarConfig$}>
+        app-content
+      </AppWrapper>
+    );
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
         class="app-wrapper"
         id="app-wrapper"
+        style="padding-right: 640px;"
       >
         app-content
       </div>
@@ -55,6 +65,7 @@ describe('AppWrapper', () => {
       <div
         class="app-wrapper hidden-chrome"
         id="app-wrapper"
+        style="padding-right: 640px;"
       >
         app-content
       </div>
@@ -62,6 +73,52 @@ describe('AppWrapper', () => {
 
     act(() => chromeVisible$.next(true));
     component.update();
+    expect(component.getDOMNode()).toMatchInlineSnapshot(`
+      <div
+        class="app-wrapper"
+        id="app-wrapper"
+        style="padding-right: 640px;"
+      >
+        app-content
+      </div>
+    `);
+  });
+
+  it('display padding left style when sidecar direction is left', () => {
+    const chromeVisible$ = new BehaviorSubject<boolean>(true);
+    const sidecarConfig$ = new BehaviorSubject<ISidecarConfig>({
+      dockedMode: SIDECAR_DOCKED_MODE.LEFT,
+      paddingSize: 640,
+    });
+
+    const component = mount(
+      <AppWrapper chromeVisible$={chromeVisible$} sidecarConfig$={sidecarConfig$}>
+        app-content
+      </AppWrapper>
+    );
+    expect(component.getDOMNode()).toMatchInlineSnapshot(`
+      <div
+        class="app-wrapper"
+        id="app-wrapper"
+        style="padding-left: 640px;"
+      >
+        app-content
+      </div>
+    `);
+  });
+
+  it('does not display padding  style when sidecar direction is takeover', () => {
+    const chromeVisible$ = new BehaviorSubject<boolean>(true);
+    const sidecarConfig$ = new BehaviorSubject<ISidecarConfig>({
+      dockedMode: SIDECAR_DOCKED_MODE.TAKEOVER,
+      paddingSize: 640,
+    });
+
+    const component = mount(
+      <AppWrapper chromeVisible$={chromeVisible$} sidecarConfig$={sidecarConfig$}>
+        app-content
+      </AppWrapper>
+    );
     expect(component.getDOMNode()).toMatchInlineSnapshot(`
       <div
         class="app-wrapper"
diff --git a/src/core/public/rendering/app_containers.tsx b/src/core/public/rendering/app_containers.tsx
index 8ccf795f8dcf..d132f8191bd1 100644
--- a/src/core/public/rendering/app_containers.tsx
+++ b/src/core/public/rendering/app_containers.tsx
@@ -28,17 +28,29 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Observable } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 import classNames from 'classnames';
+import { ISidecarConfig, getOsdSidecarPaddingStyle } from '../overlays';
 
 export const AppWrapper: React.FunctionComponent<{
   chromeVisible$: Observable<boolean>;
-}> = ({ chromeVisible$, children }) => {
+  sidecarConfig$: Observable<ISidecarConfig | undefined>;
+}> = ({ chromeVisible$, sidecarConfig$, children }) => {
   const visible = useObservable(chromeVisible$);
+  const sidecarConfig = useObservable(sidecarConfig$, undefined);
+
+  const sidecarPaddingStyle = useMemo(() => {
+    return getOsdSidecarPaddingStyle(sidecarConfig);
+  }, [sidecarConfig]);
+
   return (
-    <div id="app-wrapper" className={classNames('app-wrapper', { 'hidden-chrome': !visible })}>
+    <div
+      id="app-wrapper"
+      className={classNames('app-wrapper', { 'hidden-chrome': !visible })}
+      style={sidecarPaddingStyle}
+    >
       {children}
     </div>
   );
diff --git a/src/core/public/rendering/rendering_service.tsx b/src/core/public/rendering/rendering_service.tsx
index ffb147bc39fc..5ac8683b44da 100644
--- a/src/core/public/rendering/rendering_service.tsx
+++ b/src/core/public/rendering/rendering_service.tsx
@@ -63,7 +63,10 @@ export class RenderingService {
         <div className="content" data-test-subj="opensearchDashboardsChrome">
           {chromeUi}
 
-          <AppWrapper chromeVisible$={chrome.getIsVisible$()}>
+          <AppWrapper
+            chromeVisible$={chrome.getIsVisible$()}
+            sidecarConfig$={overlays.sidecar.getSidecarConfig$()}
+          >
             <div className="app-wrapper-panel">
               <div id="globalBannerList">{bannerUi}</div>
               <AppContainer classes$={chrome.getApplicationClasses$()}>{appUi}</AppContainer>
diff --git a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
index c9ffe147e5f8..e6061d600f22 100644
--- a/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
@@ -922,6 +922,13 @@ exports[`dashboard listing hideWriteControls 1`] = `
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -2054,6 +2061,13 @@ exports[`dashboard listing render table listing with initial filters from URL 1`
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -3247,6 +3261,13 @@ exports[`dashboard listing renders call to action when no dashboards exist 1`] =
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -4440,6 +4461,13 @@ exports[`dashboard listing renders table rows 1`] = `
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -5633,6 +5661,13 @@ exports[`dashboard listing renders warning when listingLimit is exceeded 1`] = `
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
diff --git a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
index 1954051c9474..a76a7963d484 100644
--- a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
@@ -800,6 +800,13 @@ exports[`Dashboard top nav render in embed mode 1`] = `
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -1757,6 +1764,13 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -2714,6 +2728,13 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -3671,6 +3692,13 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -4628,6 +4656,13 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
@@ -5585,6 +5620,13 @@ exports[`Dashboard top nav render with all components 1`] = `
               "openConfirm": [MockFunction],
               "openFlyout": [MockFunction],
               "openModal": [MockFunction],
+              "sidecar": Object {
+                "getSidecarConfig$": [MockFunction],
+                "hide": [MockFunction],
+                "open": [MockFunction],
+                "setSidecarConfig": [MockFunction],
+                "show": [MockFunction],
+              },
             },
             "savedObjects": Object {
               "client": Object {
diff --git a/src/plugins/opensearch_dashboards_react/README.md b/src/plugins/opensearch_dashboards_react/README.md
index bc8bfcf0266c..f5f4cd5efe79 100644
--- a/src/plugins/opensearch_dashboards_react/README.md
+++ b/src/plugins/opensearch_dashboards_react/README.md
@@ -153,6 +153,7 @@ class MyPlugin {
 
 - `overlays.openModal` &mdash; opens modal window.
 - `overlays.openFlyout` &mdash; opens right side panel.
+- `overlays.sidecar().open` &mdash; opens sidecar.
 
 You can access `overlays` service through React context.
 
diff --git a/src/plugins/opensearch_dashboards_react/public/overlays/create_react_overlays.test.tsx b/src/plugins/opensearch_dashboards_react/public/overlays/create_react_overlays.test.tsx
index a52a298c783e..0a48e5f9c323 100644
--- a/src/plugins/opensearch_dashboards_react/public/overlays/create_react_overlays.test.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/overlays/create_react_overlays.test.tsx
@@ -31,6 +31,8 @@
 import * as React from 'react';
 import { createReactOverlays } from './create_react_overlays';
 import { overlayServiceMock } from '../../../../core/public/mocks';
+import { toMountPoint } from '../util';
+import { SIDECAR_DOCKED_MODE } from '../../../../core/public';
 
 test('throws if no overlays service provided', () => {
   const overlays = createReactOverlays({});
@@ -83,6 +85,28 @@ test('can open modal with React element', () => {
   expect(container.innerHTML).toMatchInlineSnapshot(`"<div>bar</div>"`);
 });
 
+test('can open sidecar with React element', () => {
+  const coreOverlays = overlayServiceMock.createStartContract();
+  const overlays = createReactOverlays({
+    overlays: coreOverlays,
+  });
+
+  expect(coreOverlays.sidecar.open).toHaveBeenCalledTimes(0);
+
+  overlays.sidecar().open(toMountPoint(<div>bar</div>), {
+    config: {
+      dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+      paddingSize: 460,
+    },
+  });
+
+  expect(coreOverlays.sidecar.open).toHaveBeenCalledTimes(1);
+  const container = document.createElement('div');
+  const mount = coreOverlays.sidecar.open.mock.calls[0][0];
+  mount(container);
+  expect(container.innerHTML).toMatchInlineSnapshot(`"<div>bar</div>"`);
+});
+
 test('passes through flyout options when opening flyout', () => {
   const coreOverlays = overlayServiceMock.createStartContract();
   const overlays = createReactOverlays({
@@ -116,3 +140,26 @@ test('passes through modal options when opening modal', () => {
     closeButtonAriaLabel: 'bar2',
   });
 });
+
+test('passes through sidecar options when opening sidecar', () => {
+  const coreOverlays = overlayServiceMock.createStartContract();
+  const overlays = createReactOverlays({
+    overlays: coreOverlays,
+  });
+
+  overlays.sidecar().open(toMountPoint(<>foo</>), {
+    'data-test-subj': 'foo2',
+    config: {
+      dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+      paddingSize: 460,
+    },
+  });
+
+  expect(coreOverlays.sidecar.open.mock.calls[0][1]).toEqual({
+    'data-test-subj': 'foo2',
+    config: {
+      dockedMode: SIDECAR_DOCKED_MODE.RIGHT,
+      paddingSize: 460,
+    },
+  });
+});
diff --git a/src/plugins/opensearch_dashboards_react/public/overlays/create_react_overlays.tsx b/src/plugins/opensearch_dashboards_react/public/overlays/create_react_overlays.tsx
index 0c771e0fca67..10e12ad8fdbb 100644
--- a/src/plugins/opensearch_dashboards_react/public/overlays/create_react_overlays.tsx
+++ b/src/plugins/opensearch_dashboards_react/public/overlays/create_react_overlays.tsx
@@ -52,9 +52,15 @@ export const createReactOverlays = (
     return services.overlays!.openModal(toMountPoint(<>{node}</>), options);
   };
 
+  const sidecar = () => {
+    checkCoreService();
+    return services.overlays!.sidecar;
+  };
+
   const overlays: OpenSearchDashboardsReactOverlays = {
     openFlyout,
     openModal,
+    sidecar,
   };
 
   return overlays;
diff --git a/src/plugins/opensearch_dashboards_react/public/overlays/types.ts b/src/plugins/opensearch_dashboards_react/public/overlays/types.ts
index 4a0f36e7ea4f..b5297c3ad8e0 100644
--- a/src/plugins/opensearch_dashboards_react/public/overlays/types.ts
+++ b/src/plugins/opensearch_dashboards_react/public/overlays/types.ts
@@ -40,4 +40,5 @@ export interface OpenSearchDashboardsReactOverlays {
     node: React.ReactNode,
     options?: Parameters<CoreStart['overlays']['openModal']>['1']
   ) => ReturnType<CoreStart['overlays']['openModal']>;
+  sidecar: () => CoreStart['overlays']['sidecar'];
 }