use google translate to translate page

src/app/[route]/layout.tsx

@@ -17,7 +17,7 @@ import {
 } from "../../components/locations-navbar";
 import { notFound } from "next/navigation";
 import { MainComponent } from "@/components/main-component";
-import GTranslateWrapper from "@/components/gtranslate-wrapper";
+// import GTranslateWrapper from "@/components/gtranslate-wrapper";
 import { GeoCoordinatesProvider } from "@/components/geo-context";
 import GTProdGuardScript from "@/components/gt-prod-guard-script";
 
@@ -38,7 +38,7 @@ export default async function LocationsLayout(props: {
   return (
     <>
       <GTProdGuardScript />
-      <GTranslateWrapper />
+      {  /*   <GTranslateWrapper /> */}
       <span>
         {RESOURCE_ROUTES.includes(route) ? (
           <>

src/app/globals.css

@@ -318,10 +318,10 @@ a[href^="https://maps.google.com/maps"]{display:none !important} */
   }
 }
 
-div.skiptranslate,
-#google_translate_element {
-  display: none !important;
-}
+/*div.skiptranslate,*/
+/*#google_translate_element {*/
+/*  display: none !important;*/
+/*}*/
 
 body {
   top: 0 !important;
@@ -441,3 +441,47 @@ font {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+
+/* Make Google Translate dropdown visible */
+#google_translate_element {
+  display: inline-block;
+}
+
+.goog-te-gadget {
+  font-size: 12px !important;
+  color: #000 !important;
+}
+
+.goog-te-gadget-simple {
+  background-color: #f4f4f4 !important;
+  border: 1px solid #d5d5d5 !important;
+  padding: 4px 6px !important;
+  border-radius: 4px !important;
+  display: inline-block !important;
+  cursor: pointer;
+}
+
+.goog-te-gadget-simple span {
+  color: #000 !important;
+}
+
+.goog-te-gadget img {
+  display: inline !important;
+}
+
+/* Hide Google’s top banner */
+.goog-te-banner-frame.skiptranslate {
+  display: none !important;
+}
+body {
+  top: 0px !important;
+}
+
+.skiptranslate {
+  display: none !important;
+  visibility: hidden !important;
+}
+html,
+body {
+  margin-top: 0 !important;
+}

src/app/page.tsx

@@ -8,7 +8,6 @@ import type { Metadata } from "next";
 import { Footer } from "../components/footer";
 import Link from "next/link";
 import Navbar from "@/components/Navbar";
-import GTranslateWrapper from "@/components/gtranslate-wrapper";
 import { TranslatableText } from "@/components/translatable-text";
 import Image from "next/image";
 
@@ -65,7 +64,7 @@ const services = [
 export default async function HomePage() {
   return (
     <>
-      <GTranslateWrapper />
+      {/*<GTranslateWrapper />*/}
       <Navbar background={false} />
 
       <div className="relative w-full flex flex-col bg-center pt-16 overflow-hidden bg-cover bg-no-repeat bg-amber-300">
@@ -563,7 +562,6 @@ export default async function HomePage() {
           </div>
         </div>
       </section>
-
       <Footer />
     </>
   );

src/components/Navbar.tsx

@@ -9,7 +9,7 @@
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import OffCanvasMenu from "./OffCanvasMenu";
-import { GTranslateSelect } from "./gtranslate-select";
+import GoogleTranslate from "@/components/google-translate";
 import { SignInNavbarLink } from "./sign-in-navbar-link";
 import DonationBanner from "./donation-banner";
 
@@ -72,7 +72,7 @@ export default function Navbar({ background = true }: { background: boolean }) {
             </Link>
           </div>
           <div className="flex items-center space-x-2">
-            <GTranslateSelect />
+            <GoogleTranslate />
             <SignInNavbarLink />
           </div>
         </nav>

src/components/google-translate.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const languages = [
+  { code: "en", name: "English" },
+  { code: "es", name: "Español" },
+  { code: "zh-CN", name: "中文" },
+  { code: "bn", name: "বাংলা" },
+  { code: "fr", name: "Français" },
+  { code: "ru", name: "Русский" },
+  { code: "ff", name: "Fulfulde" },
+  { code: "wo", name: "Wolof" },
+];
+
+declare global {
+  interface Window {
+    googleTranslateElementInit: () => void;
+    google: any;
+  }
+}
+
+export default function LanguageSelector() {
+  const [selected, setSelected] = useState("en");
+
+  useEffect(() => {
+    const savedLang = localStorage.getItem("selectedLanguage");
+    if (savedLang) {
+      setSelected(savedLang);
+    }
+
+    window.googleTranslateElementInit = () => {
+      new window.google.translate.TranslateElement(
+        {
+          pageLanguage: "en",
+          includedLanguages: languages.map((l) => l.code).join(","),
+        },
+        "google_translate_element",
+      );
+    };
+
+    if (!document.getElementById("google-translate-script")) {
+      const script = document.createElement("script");
+      script.id = "google-translate-script";
+      script.src =
+        "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+      script.async = true;
+      document.body.appendChild(script);
+    }
+  }, []);
+
+  const changeLanguage = (lang: string) => {
+    setSelected(lang);
+    localStorage.setItem("selectedLanguage", lang);
+
+    const tryChange = () => {
+      const selectEl =
+        document.querySelector<HTMLSelectElement>(".goog-te-combo");
+      if (selectEl) {
+        selectEl.value = lang;
+        const event = new Event("change", { bubbles: true });
+        selectEl.dispatchEvent(event);
+      } else {
+        setTimeout(tryChange, 100);
+      }
+    };
+
+    setTimeout(tryChange, 200);
+  };
+
+  useEffect(() => {
+    console.log(selected);
+  }, []);
+
+  return (
+    <div>
+      <div id="google_translate_element" style={{ display: "none" }} />
+
+      <select
+        value={selected}
+        onChange={(e) => changeLanguage(e.target.value)}
+        className="border-none bg-transparent w-28 text-sm font-medium rounded p-2 notranslate"
+      >
+        {languages.map((lang) => (
+          <option key={lang.code} value={lang.code}>
+            {lang.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

src/components/sign-in-navbar-link.tsx

@@ -21,7 +21,7 @@ function SignInNavbarLinkWrapper() {
   return user ? (
     <DropdownMenu>
       <DropdownMenuTrigger className="flex gap-2 items-center text-neutral-800">
-        <span className="max-w-14 truncate">{user.username}</span>
+        <span className="max-w-14 truncate notranslate">{user.username}</span>
         <UserCircle className="w-5 h-5" />
       </DropdownMenuTrigger>
       <DropdownMenuContent>