From faff1e1138ab5b23631a09e9823206a8c30aa2c9 Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Mon, 10 Nov 2025 18:09:13 +0500
Subject: [PATCH] link corrected

---
 components/nav_foot/navbar.tsx | 214 ++++++++++++---------------------
 1 file changed, 80 insertions(+), 134 deletions(-)

diff --git a/components/nav_foot/navbar.tsx b/components/nav_foot/navbar.tsx
index 2f681be..b7a2683 100644
--- a/components/nav_foot/navbar.tsx
+++ b/components/nav_foot/navbar.tsx
@@ -1,16 +1,20 @@
+// src/components/nav_foot/navbar.tsx
 "use client";
 
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import i18n from "@/i18n";
-import { Link } from "react-scroll";
+import { Link, animateScroll as scroll } from "react-scroll";
 import Text from "../lib_components/text";
 import "./navbar.css";
 import { logoImg } from "@/assets";
 import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
 
 export default function Navbar() {
-  // Togle variable
+  const router = useRouter();
+  const pathname = usePathname();
+
   const [toggle, setToggle] = useState(false);
   const [togglerIcon, setTogglerIcon] = useState("toggler");
   const [lang, setLang] = useState<"uz" | "ru">("uz");
@@ -20,158 +24,100 @@ export default function Navbar() {
     i18n.changeLanguage(lng);
   };
 
-  // change active toggler
   const changeToggler = () => {
-    // for show up responsive navbar
     setToggle(!toggle);
-
-    // animation class for toggle icon
     togglerIcon === "toggler"
       ? setTogglerIcon("toggler toggle")
       : setTogglerIcon("toggler");
   };
 
+  const scrollOrRoute = (id: string) => {
+    if (pathname !== `/${lang}`) {
+      // Agar user boshqa sahifada bo'lsa asosiy sahifaga yo'naltirish
+      router.push(`/${lang}#${id}`);
+    } else {
+      // Agar main page-da bo'lsa scroll qilish
+      scroll.scrollTo(document.getElementById(id)!.offsetTop - 100);
+    }
+    changeToggler();
+  };
+
+  const goHome = () => {
+    router.push(`/${lang}`);
+  };
+
   return (
-    <div
-      className={`w-[100%] bg-white  border-gray shadow-md shadow-gray-500 z-[1000] top-0`}
-    >
-      <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="w-full bg-white border-gray shadow-md shadow-gray-500 z-[1000] top-0 ">
+      <div className="container max-w-[1500px] w-full px-[10px] mx-auto flex justify-between items-center">
+        <div className="flex items-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"
+            } `}
           >
-            <div className="nav_link_group  bg-white flex items-center lg:gap-[20px] gap-[10px]">
-              <LinkGroup togle_func={changeToggler} />
-            </div>
+            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>
 
-            {/* change language part */}
-            <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 className="flex items-center gap-5">
+          <div className="nav_link_group hidden lg:flex gap-5">
+            <LinkButton txt="products" id="products" scrollFunc={scrollOrRoute} />
+            <LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
+            <LinkButton txt="contact" id="contact" scrollFunc={scrollOrRoute} />
+          </div>
 
-            <div onClick={changeToggler} className={togglerIcon}>
-              <div className="toggle_item1"></div>
-              <div className="toggle_item2"></div>
-              <div className="toggle_item3"></div>
-            </div>
+          <div onClick={changeToggler} className={togglerIcon}>
+            <div className="toggle_item1"></div>
+            <div className="toggle_item2"></div>
+            <div className="toggle_item3"></div>
+          </div>
 
-            <div
-              className={
-                toggle ? "nav_link_group_phone active" : "nav_link_group_phone"
-              }
-            >
-              <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] items-end justify-end w-full ">
-                <LinkGroup togle_func={changeToggler} />
-              </div>
+          <div className={toggle ? "nav_link_group_phone active" : "nav_link_group_phone"}>
+            <div className="flex flex-col gap-5 items-end">
+              <LinkButton txt="products" id="products" scrollFunc={scrollOrRoute} />
+              <LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
+              <LinkButton txt="contact" id="contact" scrollFunc={scrollOrRoute} />
             </div>
           </div>
-          <Link to={`/${lang}`} smooth={true} duration={500} offset={-200}>
-            <div className="flex items-center justify-center gap-2">
-              <span className="max-[770px]:hidden flex text-2xl font-bold">
-                SPES-TEXNIKA
-              </span>
-              <Image
-                src={logoImg}
-                alt="logo"
-                className="logo_img"
-                width={100}
-                height={100}
-                priority
-              />
-            </div>
-          </Link>
+        </div>
+
+        <div onClick={goHome} className="flex items-center gap-2 cursor-pointer">
+          <span className="flex max-[770px]:hidden text-2xl font-bold">SPES-TEXNIKA</span>
+          <Image src={logoImg} alt="logo" width={100} height={100} priority />
         </div>
       </div>
-      <div
-        onClick={changeToggler}
-        className={toggle ? "overflow active" : "overflow"}
-      ></div>
     </div>
   );
 }
 
-function LinkGroup({ togle_func }: { togle_func: () => void }) {
+function LinkButton({
+  txt,
+  id,
+  scrollFunc,
+}: {
+  txt: string;
+  id: string;
+  scrollFunc: (id: string) => void;
+}) {
   return (
-    <>
-      <Link
-        to="contact"
-        smooth={true}
-        duration={500}
-        offset={-200}
-        onClick={togle_func}
-        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>
-      <Link
-        to="about"
-        smooth={true}
-        duration={500}
-        offset={-200}
-        onClick={togle_func}
-        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>
-
-      <Link
-        to="products"
-        smooth={true}
-        duration={500}
-        offset={-200}
-        onClick={togle_func}
-        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>
-    </>
+    <button
+      onClick={() => scrollFunc(id)}
+      className="text-primary hover:text-secondary text-[20px]"
+    >
+      <Text txt={txt} />
+    </button>
   );
 }