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

spestexnika

Browse Source
This commit is contained in:
Davron Chetin
2025-10-04 11:41:38 +05:00
parent cb78857a3a
commit 398269b49b
180 changed files with 1174 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/nav_foot/header.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { FaLocationDot } from "react-icons/fa6";
export default function Header() {
return (
<div className="bg-primary py-3 flex items-center justify-around">
{/* */}
<div className="max-w-[1200px] w-full mx-auto flex items-center justify-between ">
{/* */}
<div>
<a href="tel:+998332520000" className="hover:cursor-pointer text-white flex flex-wrap justify-center items-center max-w-[250px] w-full ">
00 00 232 33 998+
<span className="text-[#f2a01c] text-[20px]">
<FaLocationDot />
</span>
</a>
</div>
{/* */}
<div className="flex flex-wrap justify-center items-center text-white max-w-[250px] w-full ">
Uzbekistan , Tashkent
<span className="text-[#f2a01c] text-[20px]">
<FaLocationDot />
</span>
</div>
{/* */}
</div>
</div>
);
}

103
components/nav_foot/navbar.css Normal file
View File

@@ -0,0 +1,103 @@
.nav_link_group_phone {
display: none;
}
.toggler {
display: none;
}
.Navbar_btn {
display: none;
}
.toggler div {
width: 1.5rem;
height: 0.15rem;
margin: 0.5rem;
background: rgb(10, 131, 26);
background-color: rgb(10, 131, 26);
transition: 0.4s ease-in-out;
}
.toggler .toggle_item2 {
width: 1rem;
}
.overflow{
position: absolute;
display: none;
width: 100%;
top: 0;
bottom: 0;
left: 0;
height: 100%;
background-color: rgba(66, 64, 64, 0.199);
}
.overflow.active{
display: block;
}
@media (max-width: 768px) {
.nav_link_group {
display: none;
}
.toggler {
display: block;
width: 100%;
}
.toggler.toggle {
display: flex;
flex-direction: column;
align-items: end;
}
/* animation toggle icon */
.toggler.toggle .toggle_item1 {
transform: rotate(-45deg) translate(-20px, 5px);
}
.toggler.toggle .toggle_item2 {
opacity: 0;
}
.toggler.toggle .toggle_item3 {
transform: rotate(45deg) translate(-20px, -5px);
}
.nav_link_group_phone {
position: absolute;
z-index: 1;
top: 0vh;
right: 0;
bottom: 0;
height: 100vh;
width: calc(50% + 100px);
max-width: 100%;
background-color: white;
background: white;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 20px;
padding: 0 10px 10px 10px;
transform: translate(100%);
transition: 0.4s ease-in-out;
}
.overflow{
position: absolute;
display: none;
width: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
background-color: rgba(66, 64, 64, 0.199);
}}
.active {
transform: translate(0);
}

134
components/nav_foot/navbar.tsx Normal file
View File

@@ -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>
</>
);
}