added next-intl, composed next-auth and next-intl in middleware, fixed some bugs, completed details page, added google auth

src/widgets/Navbar/NavLanguage/NavLanguage.tsx

@@ -1,20 +1,52 @@
+"use client";
+
 import "./NavLanguage.scss";
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useRef, useState, useTransition } from "react";
 import globus from "./icons/globus.svg";
 import chevron from "./icons/chevron-down.svg";
 import check from "./icons/check.svg";
+import { useParams, useRouter } from "next/navigation";
+import { LANGUAGES } from "./variables";
+import { usePathname } from "@/shared/config/navigation";
 
 const NavLanguage = () => {
-  const [language, setLanguage] = useState<string>("ru");
   const [openMenu, setOpenMenu] = useState<boolean>(false);
-  const LANGUAGES = [
-    { id: 1, language: "Русский", index: "ru" },
-    { id: 2, language: "Кыргызча", index: "kg" },
-    { id: 3, language: "English", index: "en" },
-  ];
+  const menuRef: React.RefObject<HTMLDivElement> = useRef(null);
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const { locale } = useParams();
+
+  const [_, startTransition] = useTransition();
+  const [language, setLanguage] = useState<string>(locale as string);
+
+  useEffect(() => {
+    const params = window.location.search || "";
+    startTransition(() => {
+      router.replace(`/${language}${pathname}${params}`, {
+        scroll: false,
+      });
+    });
+  }, [language]);
+
+  useEffect(() => {
+    function handleClickOutside(event: any) {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target)
+      ) {
+        setOpenMenu(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [menuRef]);
+
   return (
-    <div className="nav-language">
+    <div ref={menuRef} className="nav-language">
       <button
         onClick={() => setOpenMenu((prev) => !prev)}
         className="nav-language__btn"
@@ -29,7 +61,10 @@ const NavLanguage = () => {
               className={`nav-language__option${
                 language === lang.index ? "_active" : ""
               }`}
-              onClick={() => setLanguage(lang.index)}
+              onClick={() => {
+                setLanguage(lang.index);
+                setOpenMenu(false);
+              }}
               key={lang.id}
             >
               {lang.language}