Update Header top position when Cloud banner is closed

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

Hide file tree

Showing 4 changed files with 53 additions and 59 deletions.
diff --git a/src/App.js b/src/App.js
@@ -114,6 +114,20 @@ const App = () => {
     onClientUpdate()
   }, [meilisearchJsClient])
 
+  const handleCloudBannerClose = () => {
+    setShowCloudBanner(false)
+    localStorage.setItem('bannerVisibility', JSON.stringify(false))
+  }
+
+  // Retrieve the banner visibility state from local storage on component mount
+  React.useEffect(() => {
+    const storedVisibility = localStorage.getItem('bannerVisibility')
+    if (storedVisibility) {
+      setShowCloudBanner(JSON.parse(storedVisibility))
+    }
+    return () => {}
+  }, [])
+
   return (
     <ApiKeyContext.Provider value={{ apiKey, setApiKey }}>
       <Wrapper>
@@ -122,7 +136,12 @@ const App = () => {
             onClose={() => setIsApiKeyBannerVisible(false)}
           />
         )}
-        {showCloudBanner && <CloudBanner />}
+        {showCloudBanner && (
+          <CloudBanner
+            handleBannerClose={handleCloudBannerClose}
+            isBannerVisible={showCloudBanner}
+          />
+        )}
         {isMeilisearchRunning ? (
           <Body
             currentIndex={currentIndex}
@@ -131,6 +150,7 @@ const App = () => {
             requireApiKeyToWork={requireApiKeyToWork}
             getIndexesList={getIndexesList}
             isApiKeyBannerVisible={isApiKeyBannerVisible}
+            isCloudBannerVisible={showCloudBanner}
           />
         ) : (
           <NoMeilisearchRunning />

diff --git a/src/components/Body.js b/src/components/Body.js
@@ -34,6 +34,7 @@ const Body = ({
   setCurrentIndex,
   requireApiKeyToWork,
   isApiKeyBannerVisible,
+  isCloudBannerVisible,
 }) => {
   const { meilisearchJsClient, instantMeilisearchClient } =
     useMeilisearchClientContext()
@@ -51,6 +52,7 @@ const Body = ({
         client={meilisearchJsClient}
         refreshIndexes={getIndexesList}
         isBannerVisible={isApiKeyBannerVisible}
+        isCloudBannerVisible={isCloudBannerVisible}
       />
       <BodyWrapper>
         {/* <Sidebar /> */}

diff --git a/src/components/CloudBanner.js b/src/components/CloudBanner.js
@@ -28,64 +28,37 @@ const CloudBannerWrapper = styled.div`
   padding: 4px;
 `
 
-const CloudBanner = () => {
-  const [isBannerVisible, setIsBannerVisible] = React.useState(true)
+const CloudBanner = ({ handleBannerClose, isBannerVisible }) => (
+  <>
+    {isBannerVisible && (
+      <CloudBannerWrapper className="cloud-banner">
+        <Container display="flex" flexDirection="column" alignContent="center">
+          <Typography variant="typo14" color="white">
+            Scale up with Meilisearch Cloud 🚀
+          </Typography>
 
-  const handleBannerClose = () => {
-    setIsBannerVisible(false)
-    localStorage.setItem('bannerVisibility', JSON.stringify(false))
-  }
-
-  // Retrieve the banner visibility state from local storage on component mount
-  React.useEffect(() => {
-    const storedVisibility = localStorage.getItem('bannerVisibility')
-    if (storedVisibility) {
-      setIsBannerVisible(JSON.parse(storedVisibility))
-    }
-
-    return () => {}
-  }, [])
-
-  return (
-    <>
-      {isBannerVisible && (
-        <CloudBannerWrapper className="cloud-banner">
-          <Container
-            display="flex"
-            flexDirection="column"
-            alignContent="center"
-          >
-            <Typography variant="typo14" color="white">
-              Scale up with Meilisearch Cloud 🚀
-            </Typography>
-
-            <Typography variant="typo15" color="white">
-              Faster, smarter search—no maintenance needed.{' '}
-              <Link
-                href="https://www.meilisearch.com/cloud?utm_campaign=oss&utm_source=integration&utm_medium=minidashboard"
-                color="white"
-              >
-                <Typography variant="typo14" color="white">
-                  Start free
-                </Typography>
-              </Link>
+          <Typography variant="typo15" color="white">
+            Faster, smarter search—no maintenance needed.{' '}
+            <Link
+              href="https://www.meilisearch.com/cloud?utm_campaign=oss&utm_source=integration&utm_medium=minidashboard"
+              color="white"
+            >
               <Typography variant="typo14" color="white">
-                {' '}
-                with no commitment.
+                Start free
               </Typography>
+            </Link>
+            <Typography variant="typo14" color="white">
+              {' '}
+              with no commitment.
             </Typography>
-            <Button
-              color="gray.9"
-              aria-label="close"
-              onClick={handleBannerClose}
-            >
-              <Cross style={{ width: 10 }} />
-            </Button>
-          </Container>
-        </CloudBannerWrapper>
-      )}
-    </>
-  )
-}
+          </Typography>
+          <Button color="gray.9" aria-label="close" onClick={handleBannerClose}>
+            <Cross style={{ width: 10 }} />
+          </Button>
+        </Container>
+      </CloudBannerWrapper>
+    )}
+  </>
+)
 
 export default CloudBanner
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -23,7 +23,6 @@ const HeaderWrapper = styled('div')(compose(position), {
   display: 'flex',
   position: 'sticky',
   height: '120px',
-  top: 74, // Cloud banner height
   boxShadow: `0px 0px 30px ${(p) => Color(p.theme.colors.gray[0]).alpha(0.15)}`,
   zIndex: 10,
 })
@@ -72,7 +71,7 @@ const Header = ({
   setCurrentIndex,
   refreshIndexes,
   requireApiKeyToWork,
-  isBannerVisible,
+  isCloudBannerVisible,
 }) => {
   const { meilisearchJsClient } = useMeilisearchClientContext()
   const [version, setVersion] = React.useState()
@@ -91,7 +90,7 @@ const Header = ({
   }, [meilisearchJsClient])
 
   return (
-    <HeaderWrapper top={isBannerVisible ? 55 : 0}>
+    <HeaderWrapper top={isCloudBannerVisible ? 74 : 0}>
       <Container
         p={4}
         display="flex"