135 lines
4.0 KiB
TypeScript
135 lines
4.0 KiB
TypeScript
"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>
|
|
</>
|
|
);
|
|
}
|