Adjust header height based on visible banners

meilisearch · Nov 28, 2024 · 67d2286 · 67d2286
1 parent eabc1c4
commit 67d2286
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -51,7 +51,7 @@ const Body = ({
         requireApiKeyToWork={requireApiKeyToWork}
         client={meilisearchJsClient}
         refreshIndexes={getIndexesList}
-        isBannerVisible={isApiKeyBannerVisible}
+        isApiKeyBannerVisible={isApiKeyBannerVisible}
         isCloudBannerVisible={isCloudBannerVisible}
       />
       <BodyWrapper>

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -71,6 +71,7 @@ const Header = ({
   setCurrentIndex,
   refreshIndexes,
   requireApiKeyToWork,
+  isApiKeyBannerVisible,
   isCloudBannerVisible,
 }) => {
   const { meilisearchJsClient } = useMeilisearchClientContext()
@@ -89,8 +90,10 @@ const Header = ({
     getMeilisearchVersion()
   }, [meilisearchJsClient])
 
+  const topPosition =
+    (isCloudBannerVisible ? 74 : 0) + (isApiKeyBannerVisible ? 55 : 0)
   return (
-    <HeaderWrapper top={isCloudBannerVisible ? 74 : 0}>
+    <HeaderWrapper top={topPosition}>
       <Container
         p={4}
         display="flex"