From 73d43e4bdd5cb1c723e99efbed26852db22d1c11 Mon Sep 17 00:00:00 2001
From: AsmitaMishra24 <146121869+AsmitaMishra24@users.noreply.github.com>
Date: Sat, 20 Jul 2024 02:11:18 +0530
Subject: [PATCH] Added Translator

---
 client/src/components/Navbar/navbar.jsx       | 23 ++++-----
 .../src/components/Translator/Translator.css  | 47 +++++++++++++++++++
 .../src/components/Translator/Translator.jsx  | 40 ++++++++++++++++
 3 files changed, 99 insertions(+), 11 deletions(-)
 create mode 100644 client/src/components/Translator/Translator.css
 create mode 100644 client/src/components/Translator/Translator.jsx

diff --git a/client/src/components/Navbar/navbar.jsx b/client/src/components/Navbar/navbar.jsx
index c8125a2..2748a6b 100644
--- a/client/src/components/Navbar/navbar.jsx
+++ b/client/src/components/Navbar/navbar.jsx
@@ -7,9 +7,9 @@ import logo2 from "../../assets/shoelogo.jpg";
 import axios from "axios";
 import {useDispatch, useSelector} from "react-redux";
 import { logOut, setUsername } from "../../redux/auth-slice";
+import Translate from "../Translator/Translator";
 
 const Navbar = () => {
-
     const [user, setUser] = useState();
     const dispatch = useDispatch();
     const logged = useSelector((state)=>state.auth.value.isAuth);
@@ -135,14 +135,14 @@ const Navbar = () => {
                     Login
                 </Link>
             </Menu>
-            <nav className="flex items-center py-4 px-2 text-md">
+            <nav className="flex items-center py-4 px-2 text-md justify-between w-full">
                 <div className="flex gap-5 w-[30%] justify-center items-center max-lg:hidden">
                     <NavLink
                         to="/"
                         className={({ isActive }) =>
                             isActive
-                                ? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10"
-                                : "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10"
+                                ? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 px-2 ml-3"
+                                : "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold px-2 ml-3"
                         }
                     >
                         Home
@@ -151,8 +151,8 @@ const Navbar = () => {
                         to="categories"
                         className={({ isActive }) =>
                             isActive
-                                ? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
-                                : "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
+                                ? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 px-3"
+                                : "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold px-3"
                         }
                     >
                         Categories
@@ -161,8 +161,8 @@ const Navbar = () => {
                         to="customize"
                         className={({ isActive }) =>
                             isActive
-                                ? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
-                                : "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
+                                ? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 px-3"
+                                : "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold px-3"
                         }
                     >
                         Customize
@@ -171,14 +171,15 @@ const Navbar = () => {
                         to="shop"
                         className={({ isActive }) =>
                             isActive
-                                ? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
-                                : "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
+                                ? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 px-3"
+                                : "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold px-3"
                         }
                     >
                         Shop
                     </NavLink>
                 </div>
-                <div className="flex w-[69%] text-left justify-center items-center max-lg:w-full max-lg:justify-start">
+                <Translate />
+                <div className="flex w-[30%] text-left justify-center items-center max-lg:w-full max-lg:justify-start">
                     <div className="lg:hidden">
                         <Divide
                             size={20}
diff --git a/client/src/components/Translator/Translator.css b/client/src/components/Translator/Translator.css
new file mode 100644
index 0000000..d5386db
--- /dev/null
+++ b/client/src/components/Translator/Translator.css
@@ -0,0 +1,47 @@
+body {
+    top: 0 !important;
+}
+
+font {
+    background-color: transparent !important;
+    box-shadow: none !important;
+}
+
+.google-translate-container {
+    display: flex;
+    align-items: center;
+    margin-left: 30px;
+}
+
+.goog-logo-link,
+.goog-te-banner-frame,
+.VIpgJd-ZVi9od-l4eHX-hSRGPd,
+.VIpgJd-ZVi9od-aZ2wEe,
+.VIpgJd-ZVi9od-ORHb-OEVmcd {
+    display: none !important;
+}
+
+.goog-te-gadget {
+    color: transparent !important;
+}
+
+.goog-te-gadget .goog-te-combo {
+    background-color: transparent !important;
+    color: black !important;
+    font-size: 15px;
+    border: 1px solid black;
+    padding: 5px;
+}
+
+.goog-te-gadget .goog-te-combo option {
+    color: black;
+}
+
+#goog-gt-tt, .goog-te-balloon-frame{
+    display: none !important;
+} 
+
+.goog-text-highlight { 
+    background: none !important; 
+    box-shadow: none !important;
+}
\ No newline at end of file
diff --git a/client/src/components/Translator/Translator.jsx b/client/src/components/Translator/Translator.jsx
new file mode 100644
index 0000000..8c867a7
--- /dev/null
+++ b/client/src/components/Translator/Translator.jsx
@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import "../Translator/Translator.css";
+
+const Translate = () => {
+  useEffect(() => {
+    window.googleTranslateInit = () => {
+      if (!window.google.translate.TranslateElement) {
+        setTimeout(window.googleTranslateInit, 100);
+      } else {
+        new window.google.translate.TranslateElement({
+          pageLanguage: 'en',
+          includedLanguages: 'en,hi,pa,sa,ur,bn,es,ja,ko,zh-CN,es,fr,de,it,ta,te',
+          layout: window.google.translate.TranslateElement.InlineLayout.HORIZONTAL,
+          defaultLanguage: 'en',
+        }, 'google_element');
+      }
+    };
+
+    const loadGoogleTranslateScript = () => {
+      if (!document.getElementById("google_translate_script")) {
+        const script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src = "https://translate.google.com/translate_a/element.js?cb=googleTranslateInit";
+        script.id = "google_translate_script";
+        script.onerror = () => console.error('Error loading Google Translate script');
+        document.body.appendChild(script);
+      }
+    };
+
+    loadGoogleTranslateScript();
+
+    if (window.google && window.google.translate) {
+      window.googleTranslateInit();
+    }
+  }, []);
+
+  return <div id="google_element" className="google-translate-container"></div>;
+};
+
+export default Translate;
\ No newline at end of file