Ilgeldi
/
turkmen-expo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update layout and styles for HomePage and BurgerMenu components

This commit is contained in:
Batyr 2025-11-06 11:55:45 +05:00
parent 506a03318e
commit a11de84ae5
3 changed files with 107 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/(root)/page.tsx
View File

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

204
components/shared/Header.tsx
View File

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

2
components/ui/burger-menu.tsx
View File

@ -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>