navbar part is over

2025-10-04 12:55:44 +05:00
parent 398269b49b
commit 23eea253d2
7 changed files with 226 additions and 107 deletions
--- a/components/nav_foot/header.tsx
+++ b/components/nav_foot/header.tsx
@@ -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 ">
--- 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);
-  }
+  }
+}
+
+.active {
+  transform: translate(0);
+}
--- a/components/nav_foot/navbar.tsx
+++ b/components/nav_foot/navbar.tsx
@@ -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>