[EuiCollapsibleNavBeta] Add global CSS variable for width offset (#7248)

elastic · Oct 3, 2023 · 9554450 · 9554450
1 parent 10a50bb
commit 9554450
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -11,6 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../header';
 import { EuiPageTemplate } from '../page_template';
+import { EuiBottomBar } from '../bottom_bar';
 import { EuiFlyout } from '../flyout';
 import { EuiButton } from '../button';
 import { EuiTitle } from '../title';
@@ -469,6 +470,24 @@ export const FlyoutInFixedHeaders: Story = {
   },
 };
 
+export const GlobalCSSVariable: Story = {
+  render: ({ ...args }) => (
+    <>
+      <EuiHeader position="fixed">
+        <EuiHeaderSection>
+          <EuiCollapsibleNavBeta {...args}>
+            This story tests the global `--euiCollapsibleNavOffset` CSS variable
+          </EuiCollapsibleNavBeta>
+        </EuiHeaderSection>
+      </EuiHeader>
+      <EuiBottomBar left="var(--euiCollapsibleNavOffset, 0)">
+        This text should be visible at all times and the bar position should
+        update dynamically based on the nav width (including on mobile)
+      </EuiBottomBar>
+    </>
+  ),
+};
+
 export const CollapsedStateInLocalStorage: Story = {
   render: () => {
     const key = 'EuiCollapsibleNav__isCollapsed';

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -18,7 +18,12 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
+import {
+  useEuiTheme,
+  useEuiThemeCSSVariables,
+  useGeneratedHtmlId,
+  throttle,
+} from '../../services';
 
 import { CommonProps } from '../common';
 import { EuiFlyout, EuiFlyoutProps } from '../flyout';
@@ -88,6 +93,7 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
   focusTrapProps: _focusTrapProps,
   ...rest
 }) => {
+  const { setGlobalCSSVariables } = useEuiThemeCSSVariables();
   const euiTheme = useEuiTheme();
   const headerHeight = euiHeaderVariables(euiTheme).height;
 
@@ -138,9 +144,17 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
   const width = useMemo(() => {
     if (isOverlayFullWidth) return '100%';
     if (isPush && isCollapsed) return headerHeight;
-    return _width;
+    return `${_width}px`;
   }, [_width, isOverlayFullWidth, isPush, isCollapsed, headerHeight]);
 
+  // Other UI elements may need to account for the nav width -
+  // set a global CSS variable that they can use
+  useEffect(() => {
+    setGlobalCSSVariables({
+      '--euiCollapsibleNavOffset': isOverlay ? '0' : width,
+    });
+  }, [width, isOverlay, setGlobalCSSVariables]);
+
   /**
    * Prop setup
    */