fix sticky header attempt 1

elastic · Oct 9, 2023 · e06aeb3 · e06aeb3
1 parent a18b523
commit e06aeb3
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 22 deletions.
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/project/app_menu.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { useEuiTheme } from '@elastic/eui';
+import { useEuiTheme, EuiResizeObserver } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { MountPoint } from '@kbn/core-mount-utils-browser';
 import React from 'react';
@@ -17,26 +17,43 @@ interface AppMenuBarProps {
 }
 export const AppMenuBar = ({ headerActionMenuMounter }: AppMenuBarProps) => {
   const { euiTheme } = useEuiTheme();
+  const [height, setHeight] = React.useState<number | null>(null);
+
+  React.useLayoutEffect(() => {
+    if (height === null) return;
+    const kbnAppWrapper = document.querySelector('.kbnAppWrapper') as HTMLElement;
+    if (!kbnAppWrapper) return; // should never happen
+
+    kbnAppWrapper.style.setProperty('--kbnProjectHeaderAppActionMenuHeight', `${height}px`);
+    return () => {
+      kbnAppWrapper.style.removeProperty('--kbnProjectHeaderAppActionMenuHeight');
+    };
+  }, [height]);
+
   return (
-    <div
-      className="header__actionMenu"
-      data-test-subj="kibanaProjectHeaderActionMenu"
-      css={css`
-        z-index: ${euiTheme.levels.header};
-        background: ${euiTheme.colors.emptyShade};
-        border-bottom: ${euiTheme.border.thin};
-        display: flex;
-        justify-content: end;
-        align-items: center;
-        padding: ${euiTheme.size.s};
-        margin-bottom: -${euiTheme.border.width.thin};
-        /* fixates the elements position in the viewport, removes the element from the flow of the page */
-        position: sticky;
-        /* position below the primary fixed EuiHeader in the viewport */
-        top: var(--euiFixedHeadersOffset, 0);
-      `}
-    >
-      <HeaderActionMenu mounter={headerActionMenuMounter} />
-    </div>
+    <EuiResizeObserver onResize={(d) => setHeight(d.height)}>
+      {(resizeRef) => (
+        <div
+          className="header__actionMenu"
+          data-test-subj="kibanaProjectHeaderActionMenu"
+          ref={resizeRef}
+          css={css`
+            z-index: ${euiTheme.levels.header};
+            background: ${euiTheme.colors.emptyShade};
+            border-bottom: ${height ? euiTheme.border.thin : 'none'};
+            justify-content: end;
+            align-items: center;
+            padding: ${height ? euiTheme.size.s : 0};
+            margin-bottom: -${euiTheme.border.width.thin};
+            /* fixates the elements position in the viewport, removes the element from the flow of the page */
+            position: sticky;
+            /* position below the primary fixed EuiHeader in the viewport */
+            top: var(--euiFixedHeadersOffset, 0);
+          `}
+        >
+          <HeaderActionMenu mounter={headerActionMenuMounter} />
+        </div>
+      )}
+    </EuiResizeObserver>
   );
 };
diff --git a/src/core/public/_css_variables.scss b/src/core/public/_css_variables.scss
@@ -5,6 +5,10 @@
   --kbnHeaderOffset: var(--euiFixedHeadersOffset, 0);
   // total height of everything when the banner is present
   --kbnHeaderOffsetWithBanner: calc(var(--kbnHeaderBannerHeight) + var(--kbnHeaderOffset));
+
+  // height of the action menu in the header in serverless projects
+  // this variable is dynamically set when mounted
+  --kbnProjectHeaderAppActionMenuHeight: 0;
 }
 
 // Quick note: This shouldn't be mixed with Sass variable declarations,

diff --git a/src/core/public/styles/rendering/_base.scss b/src/core/public/styles/rendering/_base.scss
@@ -33,6 +33,8 @@
   flex-grow: 1;
   z-index: 0; // This effectively puts every high z-index inside the scope of this wrapper to it doesn't interfere with the header and/or overlay mask
   position: relative; // This is temporary for apps that relied on this being present on `.application`
+
+  --euiFixedHeadersOffset: calc(var(--kbnHeaderOffset) + var(--kbnProjectHeaderAppActionMenuHeight));
 }
 
 .kbnBody {
@@ -41,9 +43,11 @@
 
 // Conditionally override :root CSS fixed header variable. Updating `--euiFixedHeadersOffset`
 // on the body will cause all child EUI components to automatically update their offsets
-
 .kbnBody--hasHeaderBanner {
   --euiFixedHeadersOffset: var(--kbnHeaderOffsetWithBanner);
+  .kbnAppWrapper {
+    --euiFixedHeadersOffset: calc(var(--kbnHeaderOffsetWithBanner) + var(--kbnProjectHeaderAppActionMenuHeight));
+  }
 
   // Offset fixed EuiHeaders by the top banner
   .euiHeader[data-fixed-header] {
@@ -58,7 +62,13 @@
 }
 .kbnBody--chromeHidden {
   --euiFixedHeadersOffset: 0;
+  .kbnAppWrapper {
+    --euiFixedHeadersOffset: 0;
+  }
 }
 .kbnBody--chromeHidden.kbnBody--hasHeaderBanner {
   --euiFixedHeadersOffset: var(--kbnHeaderBannerHeight);
+  .kbnAppWrapper {
+    --euiFixedHeadersOffset: var(--kbnHeaderBannerHeight);
+  }
 }