spestexnika

2025-10-04 11:41:38 +05:00
parent cb78857a3a
commit 398269b49b
180 changed files with 1174 additions and 113 deletions
--- a/components/nav_foot/navbar.tsx
+++ b/components/nav_foot/navbar.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import i18n from "@/i18n";
+import { Link } from "react-scroll";
+import Text from "../text";
+import "./navbar.css";
+import { logoImg } from "@/assets";
+import Image from "next/image";
+
+export default function Navbar() {
+  // Togle variable
+  const [toggle, setToggle] = useState(false);
+  const [togglerIcon, setTogglerIcon] = useState("toggler");
+  const [lang, setLang] = useState<"uz" | "ru">("uz");
+
+  const handleChangeLang = (lng: "uz" | "ru") => {
+    setLang(lng);
+    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");
+  };
+
+  return (
+    <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={`w-full flex justify-between items-center pb-[10px] pt-[10px]`}
+        >
+          <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]">
+              <LinkGroup togle_func={changeToggler} />
+            </div>
+
+            {/* change language part */}
+            <div className="w-[110px] flex flex-col justify-center items-center rounded-[15px] "></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] pl-[30px] ">
+                <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">
+                SPES-TEXNIKA
+              </span>
+              <Image
+                src={logoImg}
+                alt="logo"
+                className="logo_img"
+                width={100}
+                height={100}
+                priority
+              />
+            </div>
+          </Link>
+        </div>
+      </div>
+      <div
+        onClick={changeToggler}
+        className={toggle ? "overflow active" : "overflow"}
+      ></div>
+    </div>
+  );
+}
+
+function LinkGroup({ togle_func }: { togle_func: () => void }) {
+  return (
+    <>
+      <Link
+        to="service"
+        smooth={true}
+        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`}
+      >
+        <Text txt="contact" />
+      </Link>
+      <Link
+        to="about"
+        smooth={true}
+        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`}
+      >
+        <Text txt="news" />
+      </Link>
+
+      <Link
+        to="home"
+        smooth={true}
+        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`}
+      >
+        <Text txt="products" />
+      </Link>
+    </>
+  );
+}