Multilanguage

PranavBarthwal · Jul 30, 2024 · 1f36676 · 1f36676
1 parent 3574b47
commit 1f36676
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 28 deletions.
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -1,8 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import img from '../../assets/logo_white.png';
 
 function Footer() {
   const currentYear = new Date().getFullYear();
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = 'https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate';
+    script.onerror = function () {
+      console.error('Error loading Google Translate script');
+    };
+    document.body.appendChild(script);
+
+    window.loadGoogleTranslate = function () {
+      new window.google.translate.TranslateElement(
+        {
+          pageLanguage: 'en',
+          includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,fr,de,it',
+          layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
+        },
+        'google_element'
+      );
+    };
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
   return (
     <div className="container">
       <footer className="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
@@ -12,7 +38,7 @@ function Footer() {
         <p className="col-md-4 mb-0 text-light text-center">©️ {currentYear} CosmoXplore India, Inc. All Rights Reserved</p>
         <div className="col-md-4 d-flex justify-content-center">
           <a href="https://github.com/PranavBarthwal" className="text-light me-4">
-          <i className="fab fa-github"></i>
+            <i className="fab fa-github"></i>
           </a>
           <a href="https://x.com/pranavbarthwal_" className="text-light me-4">
             <i className="fab fa-x-twitter"></i>
@@ -24,6 +50,7 @@ function Footer() {
             <i className="fab fa-linkedin-in"></i>
           </a>
         </div>
+        <div id="google_element" className="col-12 text-center mt-3"></div>
       </footer>
     </div>
   );

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -99,29 +99,6 @@ function Navbar() {
     }
   };
 
-  useEffect(() => {
-    const loadGoogleTranslate = () => {
-      new window.google.translate.TranslateElement(
-        {
-          pageLanguage: 'en',
-          includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,fr,de,it',
-          layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
-        },
-        'google_element'
-      );
-    };
-
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.src = 'https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate';
-    script.onerror = () => console.error('Error loading Google Translate script');
-    document.body.appendChild(script);
-
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-
   return (
     <nav className="navbar">
       <div className="logo">
@@ -148,9 +125,6 @@ function Navbar() {
             <NavLink className={({ isActive }) => ("rem-default " + (isActive ? ' active' : ''))} to="/login">AstroAccess</NavLink>
           </li>
           {renderContactLink()}
-          <li className="navbar-list-item" onClick={handleMenuClose}>
-            <div id="google_element"></div>
-          </li>
         </ul>
       </div>
       <div className="hamburger" id="hamburger" onClick={toggleMenu} aria-label="Menu">