diff --git a/index.html b/index.html index 2cc7425..7b58699 100644 --- a/index.html +++ b/index.html @@ -21,18 +21,6 @@ font-family: Arial, sans-serif; } - #translate-container { - position: fixed; - top: 80px; /* Adjust this value to move the box down from the top */ - left: 20px; /* Keeps the box aligned to the left */ - background: #fff; - padding: 10px; - border: 1px solid #ddd; - border-radius: 5px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); - z-index: 1000; - } - /* Optional: Add a dark mode for your website */ .dark-mode { background-color: #343434; @@ -42,15 +30,7 @@
-
-
-
- - + diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx index 53a77b3..d7afa3b 100644 --- a/src/Components/Footer/Footer.jsx +++ b/src/Components/Footer/Footer.jsx @@ -7,23 +7,29 @@ import { scroller } from "react-scroll"; import Visitors from "../Visitors"; import { AiFillHome, AiFillInfoCircle, AiFillPhone, AiFillQuestionCircle, AiFillLock, AiFillFileText } from "react-icons/ai"; import { BiBook, BiSupport, BiCommentDetail, BiBriefcase, BiGroup } from "react-icons/bi"; +import GoogleTranslateComponent from "../GoogleTranslate/GoogleTranslate"; const Footer = () => { const [sticky, setSticky] = useState(false); const [mobileMenu, setMobileMenu] = useState(false); const navigate = useNavigate(); + + useEffect(() => { + + const handleScroll = () => { setSticky(window.scrollY > 200); }; - + window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); + const toggleMenu = () => { setMobileMenu(!mobileMenu); }; @@ -99,6 +105,16 @@ const Footer = () => {
  • Media
    • + + + + {/*
    +
    +
    */} + + + +

    Need Help

    diff --git a/src/Components/GoogleTranslate/GoogleTranslate.jsx b/src/Components/GoogleTranslate/GoogleTranslate.jsx new file mode 100644 index 0000000..c80009f --- /dev/null +++ b/src/Components/GoogleTranslate/GoogleTranslate.jsx @@ -0,0 +1,32 @@ +import React, { useEffect, useRef } from "react"; + +const TranslateComponent = () => { + const googleTranslateRef = useRef(null); + + useEffect(() => { + let intervalId = null; + const checkGoogleTranslate = () => { + if (window.google && window.google.translate && window.google.translate.TranslateElement.InlineLayout) { + clearInterval(intervalId); + new window.google.translate.TranslateElement( + { + pageLanguage: "en", + includedLanguages: "af,ach,ak,am,ar,az,be,bem,bg,bh,bn,br,bs,ca,chr,ckb,co,crs,cs,cy,da,de,ee,el,en,eo,es,es-419,et,eu,fa,fi,fo,fr,fy,ga,gaa,gd,gl,gn,gu,ha,haw,hi,hr,ht,hu,hy,ia,id,ig,is,it,iw,ja,jw,ka,kg,kk,km,kn,ko,kri,ku,ky,la,lg,ln,lo,loz,lt,lua,lv,mfe,mg,mi,mk,ml,mn,mo,mr,ms,mt,ne,nl,nn,no,nso,ny,nyn,oc,om,or,pa,pcm,pl,ps,pt-BR,pt-PT,qu,rm,rn,ro,ru,rw,sd,sh,si,sk,sl,sn,so,sq,sr,sr-ME,st,su,sv,sw,ta,te,tg,th,ti,tk,tl,tn,to,tr,tt,tum,tw,ug,uk,ur,uz,vi,wo,xh,yi,yo,zh-CN,zh-TW,zu", + layout: window.google.translate.TranslateElement.InlineLayout.VERTICAL + }, + googleTranslateRef.current + ); + } + }; + intervalId = setInterval(checkGoogleTranslate, 100); + return () => clearInterval(intervalId); + }, []); + + return ( +
    +
    +
    + ); +}; + +export default TranslateComponent; \ No newline at end of file diff --git a/src/Components/GoogleTranslate/googleTranslate.css b/src/Components/GoogleTranslate/googleTranslate.css new file mode 100644 index 0000000..3ae0ef6 --- /dev/null +++ b/src/Components/GoogleTranslate/googleTranslate.css @@ -0,0 +1,11 @@ +#translate-container { + /* position: fixed; */ + height: 100px; + width: 300px; + background: #fff; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + z-index: 1000; + } \ No newline at end of file