Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar part is over

Browse Source
This commit is contained in:
Davron Chetin
2025-10-04 12:55:44 +05:00
parent 398269b49b
commit 23eea253d2
7 changed files with 226 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/nav_foot/navbar.tsx
View File

@@ -35,19 +35,62 @@ export default function Navbar() {
<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="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="nav_link_group bg-white flex items-center lg:gap-[20px] md:gap-[8px]">
<div className="nav_link_group bg-white flex items-center lg:gap-[20px] gap-[10px]">
<LinkGroup togle_func={changeToggler} />
</div>
{/* change language part */}
<div className="w-[110px] flex flex-col justify-center items-center rounded-[15px] "></div>
<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 onClick={changeToggler} className={togglerIcon}>
<div className="toggle_item1"></div>
@@ -60,19 +103,19 @@ export default function Navbar() {
toggle ? "nav_link_group_phone active" : "nav_link_group_phone"
}
>
<div onClick={changeToggler} className={togglerIcon}>
<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] ">
<div className=" flex flex-col gap-[20px] items-end justify-end w-full ">
<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">
<span className="max-[770px]:hidden flex text-2xl font-bold">
SPES-TEXNIKA
</span>
<Image
@@ -104,7 +147,7 @@ function LinkGroup({ togle_func }: { togle_func: () => void }) {
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`}
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>
@@ -114,7 +157,7 @@ function LinkGroup({ togle_func }: { togle_func: () => void }) {
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`}
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>
@@ -125,7 +168,7 @@ function LinkGroup({ togle_func }: { togle_func: () => void }) {
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`}
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>