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

2
app/globals.css
View File

@@ -29,6 +29,6 @@ body {
}
* {
transition: 0.3s ease-in-out all;
transition: 0.1s ease-in-out all;
font-family: "Roboto", sans-serif;
}

2
components/nav_foot/header.tsx
View File

@@ -4,7 +4,7 @@ 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 className="max-w-[1500px] 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 ">

165
components/nav_foot/navbar.css
View File

@@ -1,103 +1,104 @@
.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: #0c1239;
background-color: #0c1239;
transition: 0.4s ease-in-out;
}
.toggler .toggle_item2 {
width: 1rem;
}
.overflow {
position: absolute;
display: none;
top: 0;
height: 100%;
background-color: rgba(66, 64, 64, 0.199);
}
@media (max-width: 580px) {
.overflow.active {
display: block;
left: 0;
bottom: 0;
width: 100%;
}
.nav_link_group {
display: none;
}
.toggler {
display: none;
display: block;
width: 100%;
}
.Navbar_btn {
display: none;
.toggler.toggle {
display: flex;
flex-direction: column;
align-items: start;
}
.toggler div {
width: 1.5rem;
height: 0.15rem;
margin: 0.5rem;
background: rgb(10, 131, 26);
background-color: rgb(10, 131, 26);
/* 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;
left: 0;
bottom: 0;
height: 100vh;
width: calc(40% + 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;
}
.toggler .toggle_item2 {
width: 1rem;
}
.overflow{
.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;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
background-color: rgba(66, 64, 64, 0.199);
}}
.active {
transform: translate(0);
}
}
.active {
transform: translate(0);
}

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>

20
i18n/index.ts
View File

@@ -1,22 +1,24 @@
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
// import lanaguage files
import uzWords from "../public/locales/uz/common.json";
import enWords from "../public/locales/ru/common.json";
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
uz: {
common: require("../public/locales/uz/common.json"),
},
ru: {
common: require("../public/locales/ru/common.json"),
},
uz: { translation: uzWords },
en: { translation: enWords },
},
lng: "uz",
fallbackLng: "uz",
interpolation: {
escapeValue: false,
},
debug: true,
});
export default i18n;

71
package-lock.json generated
View File

@@ -9,6 +9,8 @@
"version": "0.1.0",
"dependencies": {
"i18next": "^25.5.3",
"i18next-browser-languagedetector": "^8.2.0",
"i18next-http-backend": "^3.0.2",
"i18next-resources-to-backend": "^1.2.1",
"next": "15.5.4",
"next-i18next": "^15.4.2",
@@ -1152,6 +1154,15 @@
"url": "https://opencollective.com/core-js"
}
},
"node_modules/cross-fetch": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
"integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
"license": "MIT",
"dependencies": {
"node-fetch": "^2.6.12"
}
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1269,12 +1280,30 @@
}
}
},
"node_modules/i18next-browser-languagedetector": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
"integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.23.2"
}
},
"node_modules/i18next-fs-backend": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.6.0.tgz",
"integrity": "sha512-3ZlhNoF9yxnM8pa8bWp5120/Ob6t4lVl1l/tbLmkml/ei3ud8IWySCHt2lrY5xWRlSU5D9IV2sm5bEbGuTqwTw==",
"license": "MIT"
},
"node_modules/i18next-http-backend": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz",
"integrity": "sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==",
"license": "MIT",
"dependencies": {
"cross-fetch": "4.0.0"
}
},
"node_modules/i18next-resources-to-backend": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.1.tgz",
@@ -1724,6 +1753,26 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/node-fetch": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
"license": "MIT",
"dependencies": {
"whatwg-url": "^5.0.0"
},
"engines": {
"node": "4.x || >=6.0.0"
},
"peerDependencies": {
"encoding": "^0.1.0"
},
"peerDependenciesMeta": {
"encoding": {
"optional": true
}
}
},
"node_modules/node-releases": {
"version": "2.0.21",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
@@ -2011,6 +2060,12 @@
"node": ">=18"
}
},
"node_modules/tr46": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
"license": "MIT"
},
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -2078,6 +2133,22 @@
"node": ">=0.10.0"
}
},
"node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
"license": "BSD-2-Clause"
},
"node_modules/whatwg-url": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
"license": "MIT",
"dependencies": {
"tr46": "~0.0.3",
"webidl-conversions": "^3.0.0"
}
},
"node_modules/yallist": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",

2
package.json
View File

@@ -9,6 +9,8 @@
},
"dependencies": {
"i18next": "^25.5.3",
"i18next-browser-languagedetector": "^8.2.0",
"i18next-http-backend": "^3.0.2",
"i18next-resources-to-backend": "^1.2.1",
"next": "15.5.4",
"next-i18next": "^15.4.2",