From 23eea253d2f91988eb0a7ba679159121d5eef708 Mon Sep 17 00:00:00 2001 From: Davron Chetin Date: Sat, 4 Oct 2025 12:55:44 +0500 Subject: [PATCH] navbar part is over --- app/globals.css | 2 +- components/nav_foot/header.tsx | 2 +- components/nav_foot/navbar.css | 175 +++++++++++++++++---------------- components/nav_foot/navbar.tsx | 61 ++++++++++-- i18n/index.ts | 20 ++-- package-lock.json | 71 +++++++++++++ package.json | 2 + 7 files changed, 226 insertions(+), 107 deletions(-) diff --git a/app/globals.css b/app/globals.css index 15e7246..6018852 100644 --- a/app/globals.css +++ b/app/globals.css @@ -29,6 +29,6 @@ body { } * { - transition: 0.3s ease-in-out all; + transition: 0.1s ease-in-out all; font-family: "Roboto", sans-serif; } diff --git a/components/nav_foot/header.tsx b/components/nav_foot/header.tsx index e891d9a..03702b2 100644 --- a/components/nav_foot/header.tsx +++ b/components/nav_foot/header.tsx @@ -4,7 +4,7 @@ export default function Header() { return (
{/* */} -
+
{/* */}
diff --git a/components/nav_foot/navbar.css b/components/nav_foot/navbar.css index 2a31d98..bde3af1 100644 --- a/components/nav_foot/navbar.css +++ b/components/nav_foot/navbar.css @@ -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); - } \ No newline at end of file + } +} + +.active { + transform: translate(0); +} diff --git a/components/nav_foot/navbar.tsx b/components/nav_foot/navbar.tsx index 8e4b647..1a0fec3 100644 --- a/components/nav_foot/navbar.tsx +++ b/components/nav_foot/navbar.tsx @@ -35,19 +35,62 @@ export default function Navbar() {
-
+
+
+ + +
-
+
{/* change language part */} -
+
+ + +
@@ -60,19 +103,19 @@ export default function Navbar() { toggle ? "nav_link_group_phone active" : "nav_link_group_phone" } > -
+
-
+
- + SPES-TEXNIKA 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`} > @@ -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`} > @@ -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`} > diff --git a/i18n/index.ts b/i18n/index.ts index 98da6ff..8bc4a7a 100644 --- a/i18n/index.ts +++ b/i18n/index.ts @@ -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; diff --git a/package-lock.json b/package-lock.json index 33754ac..53ca7e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 59eeb39..ba5d64d 100644 --- a/package.json +++ b/package.json @@ -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",