From a11de84ae5c25c4a1b9c4b5b1c76e269c7fde8f4 Mon Sep 17 00:00:00 2001
From: Batyr <awbatyr@gmail.com>
Date: Thu, 6 Nov 2025 11:55:45 +0500
Subject: [PATCH] Update layout and styles for HomePage and BurgerMenu
 components

---
 app/(root)/page.tsx           |   2 +-
 components/shared/Header.tsx  | 204 +++++++++++++++++-----------------
 components/ui/burger-menu.tsx |   2 +-
 3 files changed, 107 insertions(+), 101 deletions(-)

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index c001f39..b556791 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -11,7 +11,7 @@ export default async function HomePage() {
   const lang = cookies().get("lang")?.value ?? "ru";
 
   return (
-    <div className="bg-blueBg flex flex-col gap-[60px] md:gap-20 pb-20">
+    <div className="bg-blueBg flex flex-col gap-[60px] md:gap-20 pb-20 mt-[70px]">
       <Slider lang={lang} />
 
       <Suspense fallback={<Loader />}>
diff --git a/components/shared/Header.tsx b/components/shared/Header.tsx
index cefa6fd..5917a6c 100644
--- a/components/shared/Header.tsx
+++ b/components/shared/Header.tsx
@@ -56,112 +56,118 @@ export const Header = () => {
 
       {/* Mobile */}
 
-      <header
-        className={clsx(
-          "bg-[#EEF1F0] border-b border-[#DFE2E1] tab:hidden relative z-[50] flex items-center justify-between px-4 py-6",
-          {
-            // 'fixed w-full top-0': burgerOpen,
-          }
-        )}
-      >
-        <Image
-          src={searchMob}
-          height={32}
-          width={32}
-          alt="поиск"
-          className="cursor-pointer"
-          onClick={onSearch}
-        />
-
-        <Link
-          onClick={() => {
-            dispatch(setBurgerOpen(false));
-            dispatch(setShowInput(false));
-          }}
-          href={"/"}
+      {/* <div className="h-[74px] tab:hidden"> */}
+      <div className="h-[70px]">
+        <header
+          className={clsx(
+            "bg-[#EEF1F0] border-b z-30 border-[#DFE2E1] tab:hidden fixed top-0 left-0 right-0 flex items-center justify-between px-4 py-6",
+            {
+              // 'fixed w-full top-0': burgerOpen,
+            }
+          )}
         >
           <Image
-            src={logo}
-            height={24}
-            width={160}
-            alt="лого"
+            src={searchMob}
+            height={32}
+            width={32}
+            alt="поиск"
             className="cursor-pointer"
+            onClick={onSearch}
           />
-        </Link>
 
-        <div
-          onClick={toggleMenu}
-          className="cursor-pointer h-8 w-8 flex flex-col p-1 justify-between items-center"
-        >
-          <span
-            className={clsx(
-              "block transition-all rounded-full bg-PRIMARY w-6 h-[2px]",
-              {
-                "rotate-[45deg] translate-y-[9px]": burgerOpen,
-              }
-            )}
-          />
-          <span
-            className={clsx(
-              "block transition-all rounded-full bg-PRIMARY w-6 h-[2px]",
-              {
-                "opacity-0 hidden": burgerOpen,
-              }
-            )}
-          />
-          <span
-            className={clsx(
-              "block transition-all duration-300 rounded-full bg-PRIMARY w-6 h-[2px]",
-              {
-                "rotate-[-45deg] translate-y-[-10px]": burgerOpen,
-              }
-            )}
-          />
-        </div>
+          <Link
+            onClick={() => {
+              dispatch(setBurgerOpen(false));
+              dispatch(setShowInput(false));
+            }}
+            href={"/"}
+          >
+            <Image
+              src={logo}
+              height={24}
+              width={160}
+              alt="лого"
+              className="cursor-pointer"
+            />
+          </Link>
 
-        <AnimatePresence>{burgerOpen && <BurgerMenu />}</AnimatePresence>
-      </header>
-
-      {/* Desktop */}
-
-      <header className="hidden border-b border-[#DFE2E1] relative z-[3000] tab:flex flex-col">
-        <div className="bg-[#EEF1F0] text-black">
-          <div className="container py-[17px] flex items-center justify-between">
-            <div className="flex items-center">
-              <Link href="/">
-                <Image src={logo} alt="logo" height={38} width={235} />
-              </Link>
-              <div className="flex gap-[10px]">
-                <Suspense>
-                  <LangMenu />
-                </Suspense>
-                <Image
-                  src={search}
-                  alt="поиск"
-                  onClick={() => dispatch(setShowInput(true))}
-                  className="cursor-pointer"
-                />
-              </div>
-            </div>
-
-            <nav className="flex items-center gap-x-5 font-medium">
-              {headerMenu2
-                .filter((item) =>
-                  activeLang.localization === "en" ? item.en : !item.en
-                )
-                .map((item, i) => (
-                  <Link
-                    key={i}
-                    href={item.link}
-                    onClick={() => setActiveLink(item.link)}
-                  >
-                    {item.title}
-                  </Link>
-                ))}
-            </nav>
+          <div
+            onClick={toggleMenu}
+            className="cursor-pointer h-8 w-8 flex flex-col p-1 justify-between items-center"
+          >
+            <span
+              className={clsx(
+                "block transition-all rounded-full bg-PRIMARY w-6 h-[2px]",
+                {
+                  "rotate-[45deg] translate-y-[9px]": burgerOpen,
+                }
+              )}
+            />
+            <span
+              className={clsx(
+                "block transition-all rounded-full bg-PRIMARY w-6 h-[2px]",
+                {
+                  "opacity-0 hidden": burgerOpen,
+                }
+              )}
+            />
+            <span
+              className={clsx(
+                "block transition-all duration-300 rounded-full bg-PRIMARY w-6 h-[2px]",
+                {
+                  "rotate-[-45deg] translate-y-[-10px]": burgerOpen,
+                }
+              )}
+            />
           </div>
-        </div>
-      </header>
+
+          <AnimatePresence>{burgerOpen && <BurgerMenu />}</AnimatePresence>
+        </header>
+        {/* </div> */}
+
+        {/* Desktop */}
+
+        {/* <div className="hidden h-[74px] tab:block"> */}
+        <header className="hidden border-b border-[#DFE2E1] fixed top-0 left-0 right-0 z-30 tab:flex flex-col">
+          <div className="bg-[#EEF1F0] text-black">
+            <div className="container py-[17px] flex items-center justify-between">
+              <div className="flex items-center">
+                <Link href="/">
+                  <Image src={logo} alt="logo" height={38} width={235} />
+                </Link>
+                <div className="flex gap-[10px]">
+                  <Suspense>
+                    <LangMenu />
+                  </Suspense>
+                  <Image
+                    src={search}
+                    alt="поиск"
+                    onClick={() => dispatch(setShowInput(true))}
+                    className="cursor-pointer"
+                  />
+                </div>
+              </div>
+
+              <nav className="flex items-center gap-x-5 font-medium">
+                {headerMenu2
+                  .filter((item) =>
+                    activeLang.localization === "en" ? item.en : !item.en
+                  )
+                  .map((item, i) => (
+                    <Link
+                      key={i}
+                      href={item.link}
+                      onClick={() => setActiveLink(item.link)}
+                    >
+                      {item.title}
+                    </Link>
+                  ))}
+              </nav>
+            </div>
+          </div>
+        </header>
+      </div>
+      {/* </div> */}
     </>
   );
 };
diff --git a/components/ui/burger-menu.tsx b/components/ui/burger-menu.tsx
index f0923b5..a2837c4 100644
--- a/components/ui/burger-menu.tsx
+++ b/components/ui/burger-menu.tsx
@@ -103,7 +103,7 @@ export const BurgerMenu = () => {
         x: "100%",
         opacity: 0,
       }}
-      className="bg-green overflow-auto fixed w-full z-[900] top-[74px] bottom-0 left-0 min-h-[100vh] h-full px-4 py-10 flex flex-col overflow-y-auto"
+      className="bg-green overflow-auto fixed w-full z-50 top-[66px] bottom-0 left-0 min-h-[100vh] h-full px-4 py-10 flex flex-col overflow-y-auto"
     >
       {activeMenu && (
         <div>