make bigger some sizes

src/components/Navbar/Navbar.module.scss

@@ -19,7 +19,7 @@
   .btn{
     display: flex;
     width: max-content;
-    font-size: 14px;
+    font-size: 16px;
     border-radius: 4px;
     border: #000000;
     background-color: #000000;
@@ -48,7 +48,7 @@
     display: flex;
     width: 100%;
     padding: 10px 22px 0px;
-    height: 60px;
+    height: 80px;
     gap: 10px;
     margin: 0 auto;
     cursor: pointer;
@@ -106,8 +106,8 @@
       margin: 0;
       svg {
         fill: #4b5563;
-        width: 20px;
-        height: 20px;
+        width: 24px;
+        height: 24px;
       }
     }
     .searchWrapper {
@@ -154,7 +154,7 @@
     align-items: center;
     border-radius: 0.5rem;
     height: 2.5rem;
-    font-size: 0.875rem;
+    font-size: 16px;
     color: #4b5563;
     font-weight: 600;
     background-color: transparent;
@@ -162,6 +162,10 @@
     &:hover {
       background-color: #f3f4f6;
     }
+    svg {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   .cartSection {

src/components/Navbar/NavbarDown.jsx

@@ -214,7 +214,7 @@ const NavbarDown = () => {
                   count={ordersItemCount}
                   offset={[10, 0]}
                 >
-                  <button className={styles.navButton}>
+                  <button className={styles.navButton} >
                     <OrderIcon />
                   </button>
                 </Badge>

src/components/Navbar/index.jsx

@@ -4,34 +4,97 @@ import SignupForm from "../BeSeller/index";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { LogoWithText } from "../Icons";
-import Logo from "../../assets/logo2.png"
+import Logo from "../../assets/logo2.png";
+import { useTranslation } from "react-i18next";
+import tm from "../../assets/tm.png";
+import ru from "../../assets/ru.png";
+import en from "../../assets/en.png";
+
 const Navbar = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const navigate = useNavigate();
-  const showModal = () => {
-    setIsModalVisible(true);
+  const { i18n } = useTranslation();
+
+  const changeLanguage = (langCode) => {
+    i18n.changeLanguage(langCode);
+    localStorage.setItem("preferredLanguage", langCode);
+    window.location.reload();
   };
 
-  const handleCancel = () => {
-    setIsModalVisible(false);
-  };
+  const languages = [
+    { code: "tk", flag: tm, label: "TM" },
+    { code: "ru", flag: ru, label: "RU" },
+    { code: "en", flag: en, label: "EN" },
+  ];
+
+  const showModal = () => setIsModalVisible(true);
+  const handleCancel = () => setIsModalVisible(false);
+
   return (
     <>
       <header className={styles.navbar}>
         <div className={styles.navbarUp}>
           <div
-            style={{ maxWidth: "1366px", display: "flex", margin: "0 auto", alignItems: "center"}}
+            style={{
+              maxWidth: "1366px",
+              display: "flex",
+              margin: "0 auto",
+              alignItems: "center",
+            }}
           >
             <div className={styles.logo}>
               <div
                 className={styles.logoContainer}
                 onClick={() => navigate("/")}
               >
-                {/* <LogoWithText /> */}
-                <img style={{width: "200px"}} src={Logo} alt="" />
+                <img style={{ width: "300px" }} src={Logo} alt="" />
               </div>
             </div>
-            <div style={{ display: "flex", alignItems: "center", padding: "8px 14px 6px" }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                marginLeft: "auto",
+              }}
+            >
+              {languages.map((lang) => (
+                <button
+                  key={lang.code}
+                  onClick={() => changeLanguage(lang.code)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    fontSize: "16px",
+                    gap: "4px",
+                    background:
+                      i18n.language === lang.code ? "#f0f0f0" : "transparent",
+                    border:
+                      i18n.language === lang.code
+                        ? "1px solid #d9d9d9"
+                        : "1px solid transparent",
+                    borderRadius: "4px",
+                    padding: "6px 10px",
+                    cursor: "pointer",
+                    fontWeight: i18n.language === lang.code ? "600" : "400",
+                  }}
+                >
+                  <img
+                    src={lang.flag}
+                    alt={lang.label}
+                    style={{ width: "20px" }}
+                  />
+                  {lang.label}
+                </button>
+              ))}
+            </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                padding: "8px 14px 6px",
+              }}
+            >
               <button className={styles.btn} onClick={showModal}>
                 Satyjy bol
               </button>