[Embedded Console] Introduce kbnSolutionNavOffset CSS variable

packages/kbn-optimizer/limits.yml

@@ -32,7 +32,7 @@ pageLoadAssetSize:
   datasetQuality: 50624
   dataViewEditor: 28082
   dataViewFieldEditor: 27000
-  dataViewManagement: 5136
+  dataViewManagement: 5176
   dataViews: 51000
   dataVisualizer: 27530
   devTools: 38637

packages/shared-ux/page/solution_nav/src/_variables.scss

@@ -0,0 +1,4 @@
+// This size is also tracked with a variable in solution_nav.tsx, if updated
+// update there as well
+$solutionNavWidth: 248px;
+$solutionNavCollapsedWidth: $euiSizeXXL;

packages/shared-ux/page/solution_nav/src/collapse_button.scss

@@ -1,7 +1,9 @@
+@import 'variables';
+
 .kbnSolutionNavCollapseButton {
   position: absolute;
   opacity: 0;
-  left: 248px - $euiSize;
+  left: $solutionNavWidth - $euiSize;
   top: $euiSizeL;
   z-index: 2;
 
@@ -18,7 +20,7 @@
   &:hover,
   &:focus {
     opacity: 1;
-    left: 248px - $euiSizeL;
+    left: $solutionNavWidth - $euiSizeL;
   }
 
   .kbnSolutionNav__sidebar:hover & {
@@ -39,7 +41,7 @@
   top: 0;
   bottom: 0;
   height: 100%;
-  width: $euiSizeXXL;
+  width: $solutionNavCollapsedWidth;
   border-radius: 0;
   // Keep the icon at the top instead of it getting shifted to the center of the page
   padding-top: $euiSizeL + $euiSizeS;

packages/shared-ux/page/solution_nav/src/solution_nav.scss

@@ -1,5 +1,6 @@
 $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
 @import '@elastic/eui/src/components/side_nav/mixins';
+@import 'variables';
 
 // Put the page background color in the flyout version too
 .kbnSolutionNav__flyout {
@@ -14,7 +15,7 @@ $euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
   flex-direction: column;
 
   @include euiBreakpoint('m', 'l', 'xl') {
-    width: 248px;
+    width: $solutionNavWidth;
     padding: $euiSizeL;
   }
 

packages/shared-ux/page/solution_nav/src/solution_nav.tsx

@@ -7,7 +7,7 @@
  */
 import './solution_nav.scss';
 
-import React, { FC, useState, useMemo } from 'react';
+import React, { FC, useState, useMemo, useEffect } from 'react';
 import classNames from 'classnames';
 import {
   EuiAvatarProps,
@@ -23,6 +23,8 @@ import {
   htmlIdGenerator,
   useIsWithinBreakpoints,
   useIsWithinMinBreakpoint,
+  useEuiTheme,
+  useEuiThemeCSSVariables,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -71,6 +73,7 @@ export type SolutionNavProps = Omit<EuiSideNavProps<{}>, 'children' | 'items' |
 };
 
 const FLYOUT_SIZE = 248;
+const FLYOUT_SIZE_CSS = `${FLYOUT_SIZE}px`;
 
 const setTabIndex = (items: Array<EuiSideNavItemType<{}>>, isHidden: boolean) => {
   return items.map((item) => {
@@ -174,6 +177,32 @@ export const SolutionNav: FC<SolutionNavProps> = ({
     );
   }, [children, headingID, isCustomSideNav, isHidden, items, rest]);
 
+  const { euiTheme } = useEuiTheme();
+  const navWidth = useMemo(() => {
+    if (isLargerBreakpoint) {
+      return isOpenOnDesktop ? FLYOUT_SIZE_CSS : euiTheme.size.xxl;
+    }
+    if (isMediumBreakpoint) {
+      return isSideNavOpenOnMobile || !canBeCollapsed ? FLYOUT_SIZE_CSS : euiTheme.size.xxl;
+    }
+    return '0';
+  }, [
+    euiTheme,
+    isOpenOnDesktop,
+    isSideNavOpenOnMobile,
+    canBeCollapsed,
+    isMediumBreakpoint,
+    isLargerBreakpoint,
+  ]);
+  const { setGlobalCSSVariables } = useEuiThemeCSSVariables();
+  // Setting a global CSS variable with the nav width
+  // so that other pages have it available when needed.
+  useEffect(() => {
+    setGlobalCSSVariables({
+      '--kbnSolutionNavOffset': navWidth,
+    });
+  }, [navWidth, setGlobalCSSVariables]);
+
   return (
     <>
       {isSmallerBreakpoint && (

src/plugins/console/public/application/containers/embeddable/_embeddable_console.scss

@@ -8,7 +8,6 @@
   box-shadow: inset 0 $embeddableConsoleInitialHeight 0 $embeddableConsoleBackground, inset 0 600rem 0 $euiPageBackgroundColor;
   bottom: 0;
   right: 0;
-  left: var(--euiCollapsibleNavOffset, 0);
   transform: translateY(0);
   height: $embeddableConsoleInitialHeight;
   max-height: $embeddableConsoleMaxHeight;
@@ -18,6 +17,18 @@
     z-index: $euiZLevel1;
   }
 
+  &--projectChrome {
+    left: var(--euiCollapsibleNavOffset, 0);
+  }
+
+  &--classicChrome {
+    left: var(--kbnSolutionNavOffset, 0);
+  }
+
+  &--unknownChrome {
+    left: 0;
+  }
+
   &-isOpen {
     animation-duration: $euiAnimSpeedNormal;
     animation-timing-function: $euiAnimSlightResistance;

src/plugins/console/public/application/containers/embeddable/embeddable_console.tsx

@@ -8,6 +8,7 @@
 
 import React, { useState } from 'react';
 import classNames from 'classnames';
+import useObservable from 'react-use/lib/useObservable';
 import {
   EuiButton,
   EuiFocusTrap,
@@ -38,6 +39,7 @@ export const EmbeddableConsole = ({
 }: EmbeddableConsoleProps & EmbeddableConsoleDependencies) => {
   const [isConsoleOpen, setIsConsoleOpen] = useState<boolean>(false);
   const toggleConsole = () => setIsConsoleOpen(!isConsoleOpen);
+  const chromeStyle = useObservable(core.chrome.getChromeStyle$());
 
   const onKeyDown = (event: any) => {
     if (event.key === keys.ESCAPE) {
@@ -52,6 +54,9 @@ export const EmbeddableConsole = ({
     'embeddableConsole--large': size === 'l',
     'embeddableConsole--medium': size === 'm',
     'embeddableConsole--small': size === 's',
+    'embeddableConsole--classicChrome': chromeStyle === 'classic',
+    'embeddableConsole--projectChrome': chromeStyle === 'project',
+    'embeddableConsole--unknownChrome': chromeStyle === undefined,
     'embeddableConsole--fixed': true,
     'embeddableConsole--showOnMobile': false,
   });