link corrected
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -1,16 +1,20 @@
|
|||||||
|
// src/components/nav_foot/navbar.tsx
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import i18n from "@/i18n";
|
import i18n from "@/i18n";
|
||||||
import { Link } from "react-scroll";
|
import { Link, animateScroll as scroll } from "react-scroll";
|
||||||
import Text from "../lib_components/text";
|
import Text from "../lib_components/text";
|
||||||
import "./navbar.css";
|
import "./navbar.css";
|
||||||
import { logoImg } from "@/assets";
|
import { logoImg } from "@/assets";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { usePathname, useRouter } from "next/navigation";
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
// Togle variable
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
const [toggle, setToggle] = useState(false);
|
const [toggle, setToggle] = useState(false);
|
||||||
const [togglerIcon, setTogglerIcon] = useState("toggler");
|
const [togglerIcon, setTogglerIcon] = useState("toggler");
|
||||||
const [lang, setLang] = useState<"uz" | "ru">("uz");
|
const [lang, setLang] = useState<"uz" | "ru">("uz");
|
||||||
@@ -20,158 +24,100 @@ export default function Navbar() {
|
|||||||
i18n.changeLanguage(lng);
|
i18n.changeLanguage(lng);
|
||||||
};
|
};
|
||||||
|
|
||||||
// change active toggler
|
|
||||||
const changeToggler = () => {
|
const changeToggler = () => {
|
||||||
// for show up responsive navbar
|
|
||||||
setToggle(!toggle);
|
setToggle(!toggle);
|
||||||
|
|
||||||
// animation class for toggle icon
|
|
||||||
togglerIcon === "toggler"
|
togglerIcon === "toggler"
|
||||||
? setTogglerIcon("toggler toggle")
|
? setTogglerIcon("toggler toggle")
|
||||||
: setTogglerIcon("toggler");
|
: 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 (
|
return (
|
||||||
<div
|
<div className="w-full bg-white border-gray shadow-md shadow-gray-500 z-[1000] top-0 ">
|
||||||
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 flex justify-between items-center">
|
||||||
>
|
<div className="flex items-center gap-5">
|
||||||
<div className="container max-w-[1500px] w-full px-[10px] mx-auto items-center justify-between ">
|
<button
|
||||||
<div
|
onClick={() => handleChangeLang("uz")}
|
||||||
className={`w-full flex justify-between items-center pb-[10px] pt-[10px]`}
|
className={`hover:cursor-pointer ${
|
||||||
>
|
lang === "uz" && "bg-secondary text-primary rounded-[8px]"
|
||||||
<div className=" min-[580px]:flex hidden items-center justify-center gap-5">
|
} px-2 py-1 text-[20px] ${
|
||||||
<button
|
lang !== "uz" && "border-l-2 border-b-2 border-primary"
|
||||||
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] gap-[10px]">
|
UZ
|
||||||
<LinkGroup togle_func={changeToggler} />
|
</button>
|
||||||
</div>
|
<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="flex items-center gap-5">
|
||||||
<div className=" max-[580px]:flex hidden items-center justify-center gap-5">
|
<div className="nav_link_group hidden lg:flex gap-5">
|
||||||
<button
|
<LinkButton txt="products" id="products" scrollFunc={scrollOrRoute} />
|
||||||
onClick={() => handleChangeLang("uz")}
|
<LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
|
||||||
className={`hover:cursor-pointer ${
|
<LinkButton txt="contact" id="contact" scrollFunc={scrollOrRoute} />
|
||||||
lang === "uz" && "bg-secondary text-primary rounded-[8px]"
|
</div>
|
||||||
} 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 onClick={changeToggler} className={togglerIcon}>
|
||||||
<div className="toggle_item1"></div>
|
<div className="toggle_item1"></div>
|
||||||
<div className="toggle_item2"></div>
|
<div className="toggle_item2"></div>
|
||||||
<div className="toggle_item3"></div>
|
<div className="toggle_item3"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div className={toggle ? "nav_link_group_phone active" : "nav_link_group_phone"}>
|
||||||
className={
|
<div className="flex flex-col gap-5 items-end">
|
||||||
toggle ? "nav_link_group_phone active" : "nav_link_group_phone"
|
<LinkButton txt="products" id="products" scrollFunc={scrollOrRoute} />
|
||||||
}
|
<LinkButton txt="news" id="about" scrollFunc={scrollOrRoute} />
|
||||||
>
|
<LinkButton txt="contact" id="contact" scrollFunc={scrollOrRoute} />
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Link to={`/${lang}`} smooth={true} duration={500} offset={-200}>
|
</div>
|
||||||
<div className="flex items-center justify-center gap-2">
|
|
||||||
<span className="max-[770px]:hidden flex text-2xl font-bold">
|
<div onClick={goHome} className="flex items-center gap-2 cursor-pointer">
|
||||||
SPES-TEXNIKA
|
<span className="flex max-[770px]:hidden text-2xl font-bold">SPES-TEXNIKA</span>
|
||||||
</span>
|
<Image src={logoImg} alt="logo" width={100} height={100} priority />
|
||||||
<Image
|
|
||||||
src={logoImg}
|
|
||||||
alt="logo"
|
|
||||||
className="logo_img"
|
|
||||||
width={100}
|
|
||||||
height={100}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
onClick={changeToggler}
|
|
||||||
className={toggle ? "overflow active" : "overflow"}
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function LinkGroup({ togle_func }: { togle_func: () => void }) {
|
function LinkButton({
|
||||||
|
txt,
|
||||||
|
id,
|
||||||
|
scrollFunc,
|
||||||
|
}: {
|
||||||
|
txt: string;
|
||||||
|
id: string;
|
||||||
|
scrollFunc: (id: string) => void;
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<>
|
<button
|
||||||
<Link
|
onClick={() => scrollFunc(id)}
|
||||||
to="contact"
|
className="text-primary hover:text-secondary text-[20px]"
|
||||||
smooth={true}
|
>
|
||||||
duration={500}
|
<Text txt={txt} />
|
||||||
offset={-200}
|
</button>
|
||||||
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>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user