From e012f0f623aa256b277c6436814d645165474cbb Mon Sep 17 00:00:00 2001
From: Dale Mcdiarmid <dale@clickhouse.com>
Date: Tue, 29 Apr 2025 13:10:53 +0200
Subject: [PATCH] Allow diaglog to be hidden

---
 src/theme/DocItem/TOC/Desktop/index.js | 35 +++++++++++++++++++-------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/theme/DocItem/TOC/Desktop/index.js b/src/theme/DocItem/TOC/Desktop/index.js
index 628f7c3eaae..bf7d4daedaa 100644
--- a/src/theme/DocItem/TOC/Desktop/index.js
+++ b/src/theme/DocItem/TOC/Desktop/index.js
@@ -3,12 +3,18 @@ import {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
 import TOC from '@theme/TOC';
 import clsx from "clsx";
+import IconClose from '@theme/Icon/Close';
 import styles from './styles.module.css'
 import Feedback from '../../../../components/Feedback';
 
 export default function DocItemTOCDesktop() {
   const {toc, frontMatter} = useDoc();
-
+  const [isClosed, setClosed] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.sessionStorage.getItem('doc-cloud-card-banner') === 'closed';
+    }
+    return false;
+  });
 
   return (
     <div className={clsx(styles.docTOCContainer, 'theme-doc-toc-desktop-container')}>
@@ -22,14 +28,25 @@ export default function DocItemTOCDesktop() {
         <Feedback side ={toc.length >= 7 ? 'left' : 'bottom'}/>
       </div>
 
-      <div className={styles.docCloudCard}>
-        <div className={styles.docCloudCardHeader}>
-          <h6>Try ClickHouse Cloud for FREE</h6>
-        </div>
-        <p className={styles.docCloudCardContent}>Separation of storage and compute, automatic scaling, built-in SQL console, and lots more. $300 in free credits when signing up.</p>
-        <a href='https://console.clickhouse.cloud/signUp?loc=doc-card-banner'
-           className={clsx(styles.docCloudCardLink, 'click-button primary-btn')}>Try it for Free</a>
-      </div>
+      {
+        !isClosed && (
+          <div className={styles.docCloudCard}>
+            <div className={styles.docCloudCardHeader}>
+              <h6>Try ClickHouse Cloud for FREE</h6>
+              <button
+                className={styles.docCloudClose}
+                onClick={() => {
+                  setClosed(true)
+                  window.sessionStorage.setItem('doc-cloud-card-banner', 'closed');
+                }}>
+                <IconClose color="var(--ifm-color-emphasis-600)" width={10} height={10}/>
+              </button>
+            </div>
+            <p className={styles.docCloudCardContent}>Separation of storage and compute, automatic scaling, built-in SQL console, and lots more. $300 in free credits when signing up.</p>
+            <a href='https://console.clickhouse.cloud/signUp?loc=doc-card-banner' className={clsx(styles.docCloudCardLink, 'click-button primary-btn')}>Try it for Free</a>
+          </div>
+        )
+      }
     </div>
   );
 }