navbar part is over

app/globals.css

@@ -29,6 +29,6 @@ body {
 }
 
 * {
-  transition: 0.3s ease-in-out all;
+  transition: 0.1s ease-in-out all;
   font-family: "Roboto", sans-serif;
 }

components/nav_foot/header.tsx

@@ -4,7 +4,7 @@ export default function Header() {
   return (
     <div className="bg-primary  py-3 flex items-center justify-around">
       {/*  */}
-      <div className="max-w-[1200px] w-full mx-auto flex items-center justify-between ">
+      <div className="max-w-[1500px] w-full mx-auto flex items-center justify-between ">
         {/*  */}
         <div>
           <a href="tel:+998332520000" className="hover:cursor-pointer text-white flex flex-wrap justify-center items-center max-w-[250px] w-full ">

components/nav_foot/navbar.css

@@ -1,103 +1,104 @@
 .nav_link_group_phone {
+  display: none;
+}
+
+.toggler {
+  display: none;
+}
+
+.Navbar_btn {
+  display: none;
+}
+
+.toggler div {
+  width: 1.5rem;
+  height: 0.15rem;
+  margin: 0.5rem;
+  background: #0c1239;
+  background-color: #0c1239;
+  transition: 0.4s ease-in-out;
+}
+
+.toggler .toggle_item2 {
+  width: 1rem;
+}
+
+.overflow {
+  position: absolute;
+  display: none;
+  top: 0;
+  height: 100%;
+  background-color: rgba(66, 64, 64, 0.199);
+}
+
+
+@media (max-width: 580px) {
+  .overflow.active {
+    display: block;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+  .nav_link_group {
     display: none;
   }
 
   .toggler {
-    display: none;
+    display: block;
+    width: 100%;
   }
 
-  .Navbar_btn {
+  .toggler.toggle {
-    display: none;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
   }
 
-  .toggler div {
+  /* animation toggle icon */
-    width: 1.5rem;
+  .toggler.toggle .toggle_item1 {
-    height: 0.15rem;
+    transform: rotate(-45deg) translate(-20px, 5px);
-    margin: 0.5rem;
+  }
-    background: rgb(10, 131, 26);
+  .toggler.toggle .toggle_item2 {
-    background-color: rgb(10, 131, 26);
+    opacity: 0;
+  }
+  .toggler.toggle .toggle_item3 {
+    transform: rotate(45deg) translate(-20px, -5px);
+  }
+
+  .nav_link_group_phone {
+    position: absolute;
+    z-index: 1;
+    top: 0vh;
+    left: 0;
+    bottom: 0;
+    height: 100vh;
+    width: calc(40% + 100px);
+    max-width: 100%;
+    background-color: white;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+    gap: 20px;
+    padding: 0 10px 10px 10px;
+    transform: translate(-100%);
     transition: 0.4s ease-in-out;
   }
 
-  .toggler .toggle_item2 {
+  .overflow {
-    width: 1rem;
-  }
-  
-  .overflow{
     position: absolute;
     display: none;
-    width: 100%;
+    width: 100vw;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    height: 100%;
-    background-color: rgba(66, 64, 64, 0.199);
-  }
-  
-  .overflow.active{
-    display: block;
-  }
-  
-  @media (max-width: 768px) {
-    .nav_link_group {
-      display: none;
-    }
-  
-    .toggler {
-      display: block;
-      width: 100%;
-    }
-  
-    .toggler.toggle {
-      display: flex;
-      flex-direction: column;
-      align-items: end;
-    }
-  
-    /* animation toggle icon */
-    .toggler.toggle .toggle_item1 {
-      transform: rotate(-45deg) translate(-20px, 5px);
-    }
-    .toggler.toggle .toggle_item2 {
-      opacity: 0;
-    }
-    .toggler.toggle .toggle_item3 {
-      transform: rotate(45deg) translate(-20px, -5px);
-    }
-  
-    .nav_link_group_phone {
-      position: absolute;
-      z-index: 1;
-      top: 0vh;
-      right: 0;
-      bottom: 0;
-      height: 100vh;
-      width: calc(50% + 100px);
-      max-width: 100%;
-      background-color: white;
-      background: white;
-      display: flex;
-      flex-direction: column;
-      justify-content: start;
-      align-items: start;
-      gap: 20px;
-      padding: 0 10px 10px 10px;
-      transform: translate(100%);
-      transition: 0.4s ease-in-out;
-    }
-  
-   .overflow{
-    position: absolute;
-    display: none;
-    width: 100vh;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100vh;
     background-color: rgba(66, 64, 64, 0.199);
-  }}
-  
-  .active {
-    transform: translate(0);
   }
+}
+
+.active {
+  transform: translate(0);
+}

components/nav_foot/navbar.tsx

@@ -35,19 +35,62 @@ export default function Navbar() {
     <div
       className={`w-[100%] mt-12 bg-white  border-gray shadow-lg shadow-gray-200 fixed z-[1000] top-0`}
     >
-      <div className="container max-w-[1200px] w-full mx-auto items-center justify-between ">
+      <div className="container max-w-[1500px] w-full px-[10px] mx-auto items-center justify-between ">
         <div
           className={`w-full flex justify-between items-center pb-[10px] pt-[10px]`}
         >
+          <div className=" min-[580px]:flex hidden items-center justify-center gap-5">
+            <button
+              onClick={() => handleChangeLang("uz")}
+              className={`hover:cursor-pointer ${
+                lang === "uz" && "bg-secondary text-primary rounded-[8px]"
+              } px-2 py-1 text-[20px] ${
+                lang !== "uz" && "border-l-2 border-b-2 border-primary"
+              } `}
+            >
+              UZ
+            </button>
+            <button
+              onClick={() => handleChangeLang("ru")}
+              className={`hover:cursor-pointer ${
+                lang === "ru" && "bg-secondary text-primary rounded-[8px]"
+              } px-2 py-1 text-[20px]  ${
+                lang !== "ru" && "border-r-2 border-b-2 border-primary"
+              }`}
+            >
+              RU
+            </button>
+          </div>
           <div
             className={`lg:w-auto flex justify-around items-center lg:gap-[10px] gap-[5px]`}
           >
-            <div className="nav_link_group bg-white flex items-center lg:gap-[20px] md:gap-[8px]">
+            <div className="nav_link_group  bg-white flex items-center lg:gap-[20px] gap-[10px]">
               <LinkGroup togle_func={changeToggler} />
             </div>
 
             {/* change language part */}
-            <div className="w-[110px] flex flex-col justify-center items-center rounded-[15px] "></div>
+            <div className=" max-[580px]:flex hidden items-center justify-center gap-5">
+            <button
+              onClick={() => handleChangeLang("uz")}
+              className={`hover:cursor-pointer ${
+                lang === "uz" && "bg-secondary text-primary rounded-[8px]"
+              } px-2 py-1 text-[20px] ${
+                lang !== "uz" && "border-l-2 border-b-2 border-primary"
+              } `}
+            >
+              UZ
+            </button>
+            <button
+              onClick={() => handleChangeLang("ru")}
+              className={`hover:cursor-pointer ${
+                lang === "ru" && "bg-secondary text-primary rounded-[8px]"
+              } px-2 py-1 text-[20px]  ${
+                lang !== "ru" && "border-r-2 border-b-2 border-primary"
+              }`}
+            >
+              RU
+            </button>
+          </div>
 
             <div onClick={changeToggler} className={togglerIcon}>
               <div className="toggle_item1"></div>
@@ -60,19 +103,19 @@ export default function Navbar() {
                 toggle ? "nav_link_group_phone active" : "nav_link_group_phone"
               }
             >
-              <div onClick={changeToggler} className={togglerIcon}>
+              <div onClick={changeToggler} className={`${togglerIcon}`}>
                 <div className="toggle_item1"></div>
                 <div className="toggle_item2"></div>
                 <div className="toggle_item3"></div>
               </div>
-              <div className=" flex flex-col gap-[20px] pl-[30px] ">
+              <div className=" flex flex-col gap-[20px] items-end justify-end w-full ">
                 <LinkGroup togle_func={changeToggler} />
               </div>
             </div>
           </div>
           <Link to="/" smooth={true} duration={500} offset={-200}>
             <div className="flex items-center justify-center gap-2">
-              <span className="max-[500px]:hidden flex text-2xl font-bold">
+              <span className="max-[770px]:hidden flex text-2xl font-bold">
                 SPES-TEXNIKA
               </span>
               <Image
@@ -104,7 +147,7 @@ function LinkGroup({ togle_func }: { togle_func: () => void }) {
         duration={500}
         offset={-200}
         onClick={togle_func}
-        className={`lg:text-[25px] md:text-[16px] text-[25px] hover:cursor-pointer text-gray-500 hover:text-black`}
+        className={`lg:text-[25px] md:text-[18px] max-[580px]:border-b-2 w-full text-left pl-2 text-[20px] hover:cursor-pointer text-primary hover:text-secondary`}
       >
         <Text txt="contact" />
       </Link>
@@ -114,7 +157,7 @@ function LinkGroup({ togle_func }: { togle_func: () => void }) {
         duration={500}
         offset={-200}
         onClick={togle_func}
-        className={`lg:text-[25px] md:text-[16px] text-[25px] hover:cursor-pointer text-gray-500 hover:text-black`}
+        className={`lg:text-[25px] md:text-[18px] max-[580px]:border-b-2 w-full text-left pl-2 text-[20px] hover:cursor-pointer text-primary hover:text-secondary`}
       >
         <Text txt="news" />
       </Link>
@@ -125,7 +168,7 @@ function LinkGroup({ togle_func }: { togle_func: () => void }) {
         duration={500}
         offset={-200}
         onClick={togle_func}
-        className={`lg:text-[25px]  md:text-[16px] text-[25px] hover:cursor-pointer text-gray-500 hover:text-black`}
+        className={`lg:text-[25px] md:text-[18px] max-[580px]:border-b-2 w-full text-left pl-2 text-[20px] hover:cursor-pointer text-primary hover:text-secondary`}
       >
         <Text txt="products" />
       </Link>

i18n/index.ts

@@ -1,22 +1,24 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
+import Backend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+// import lanaguage files
+import uzWords from "../public/locales/uz/common.json";
+import enWords from "../public/locales/ru/common.json";
 
 i18n
+  .use(Backend)
+  .use(LanguageDetector)
   .use(initReactI18next)
   .init({
     resources: {
-      uz: {
+      uz: { translation: uzWords },
-        common: require("../public/locales/uz/common.json"),
+      en: { translation: enWords },
-      },
-      ru: {
-        common: require("../public/locales/ru/common.json"),
-      },
     },
     lng: "uz",
     fallbackLng: "uz",
-    interpolation: {
+    debug: true,
-      escapeValue: false,
-    },
   });
 
 export default i18n;

package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "i18next": "^25.5.3",
+        "i18next-browser-languagedetector": "^8.2.0",
+        "i18next-http-backend": "^3.0.2",
         "i18next-resources-to-backend": "^1.2.1",
         "next": "15.5.4",
         "next-i18next": "^15.4.2",
@@ -1152,6 +1154,15 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1269,12 +1280,30 @@
         }
       }
     },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+      "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/i18next-fs-backend": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.6.0.tgz",
       "integrity": "sha512-3ZlhNoF9yxnM8pa8bWp5120/Ob6t4lVl1l/tbLmkml/ei3ud8IWySCHt2lrY5xWRlSU5D9IV2sm5bEbGuTqwTw==",
       "license": "MIT"
     },
+    "node_modules/i18next-http-backend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz",
+      "integrity": "sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-fetch": "4.0.0"
+      }
+    },
     "node_modules/i18next-resources-to-backend": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.1.tgz",
@@ -1724,6 +1753,26 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.21",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
@@ -2011,6 +2060,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -2078,6 +2133,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "i18next": "^25.5.3",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-http-backend": "^3.0.2",
     "i18next-resources-to-backend": "^1.2.1",
     "next": "15.5.4",
     "next-i18next": "^15.4.2",