Select Language hide after some scroll

VaibhavArora314 · Jul 22, 2024 · 9dec226 · 9dec226
1 parent 20d5a40
commit 9dec226
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/frontend/src/components/GoogleTranslate.tsx b/frontend/src/components/GoogleTranslate.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import "../styles/Translate.css";
 
 declare global {
@@ -9,6 +9,8 @@ declare global {
 }
 
 const GoogleTranslate = () => {
+  const [isVisible, setIsVisible] = useState(true);
+
   useEffect(() => {
     window.googleTranslateInit = () => {
       if (!window.google.translate.TranslateElement) {
@@ -39,9 +41,21 @@ const GoogleTranslate = () => {
     if (window.google && window.google.translate) {
       window.googleTranslateInit();
     }
+
+    const handleScroll = () => {
+      setIsVisible(window.scrollY < 100); // Adjust the scroll amount as needed
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
   }, []);
 
-  return <div id="google_element" className="google-translate-container"></div>;
+  return (
+    <div id="google_element" className={`google-translate-container ${isVisible ? '' : 'hidden'}`}></div>
+  );
 };
 
 export default GoogleTranslate;
diff --git a/frontend/src/styles/Translate.css b/frontend/src/styles/Translate.css
@@ -40,3 +40,7 @@ font {
   background: none !important;
   box-shadow: none !important;
 }
+
+.google-translate-container.hidden {
+  display: none !important;
+}