change element component & add menu head & responsive head home
This commit is contained in:
Ehsan
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from "@mui/material";
|
||||
import Logo from "@/app/component/Logo";
|
||||
import Link from "next/link";
|
||||
import Row from "./list/Row";
|
||||
import Col from "./list/col";
|
||||
import ButtonMenu from "./list/col/ButtonMenu";
|
||||
import { useState } from "react";
|
||||
import BgGray from "./list/col/BgGray";
|
||||
import UserLogin from "@/components/icons/UserLogin";
|
||||
|
||||
function Header({ name }) {
|
||||
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
|
||||
>
|
||||
<div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
|
||||
<div className="">
|
||||
<BgGray
|
||||
isActive={isActive}
|
||||
setIsActive={setIsActive}
|
||||
/>
|
||||
<Col
|
||||
isActive={isActive}
|
||||
setIsActive={setIsActive}
|
||||
/>
|
||||
<div className="relative flex flex-row-reverse gap-2">
|
||||
<Logo />
|
||||
<div className="flex lg:hidden">
|
||||
<ButtonMenu
|
||||
isActive={isActive}
|
||||
setIsActive={setIsActive}
|
||||
/>
|
||||
<Logo isAbsolute={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row />
|
||||
<Link href='/signin'>
|
||||
<Button
|
||||
className="!hidden lg:!flex"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
ورود | ثبت نام
|
||||
</Button>
|
||||
<Button
|
||||
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 ${isActive ? '!bg-[#9D9D9D]' : '!bg-[#EFEFEF]'}`}
|
||||
variant="text"
|
||||
color="primary"
|
||||
>
|
||||
<div className="flex lg:hidden">
|
||||
<UserLogin />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -0,0 +1,27 @@
|
||||
import { listNav } from "@/constans";
|
||||
import { isActiveURL } from "@/helper";
|
||||
import Link from "next/link";
|
||||
|
||||
function Row() {
|
||||
return (
|
||||
<ul className="hidden lg:flex items-center justify-center gap-[40px]">
|
||||
{listNav.map(nav => (
|
||||
<li
|
||||
key={nav.id}
|
||||
>
|
||||
<Link
|
||||
href={nav.link}
|
||||
className={`
|
||||
${isActiveURL(nav.link.replace('/', ''), name) ? '!text-[#526CAC]' : 'text-[#525252]'}
|
||||
text-[16px] font-medium
|
||||
`}
|
||||
>
|
||||
{nav.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export default Row
|
||||
@@ -0,0 +1,13 @@
|
||||
function BgGray({ isActive, setIsActive }) {
|
||||
return (
|
||||
<div
|
||||
onClick={() => setIsActive(false)}
|
||||
className={`
|
||||
${isActive ? 'bg-[#232323] opacity-40 flex' : 'bg-transparent opacity-40 hidden'}
|
||||
absolute cursor-pointer transition-all duration-500 left-0 top-[-12px] sm:top-[-21px] md:top-[-30px] lg:top-[-40px] w-screen h-screen
|
||||
`}
|
||||
></div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BgGray
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Button } from "@mui/material"
|
||||
|
||||
function ButtonMenu({ isActive, setIsActive }) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => setIsActive(!isActive)}
|
||||
className="!flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
|
||||
>
|
||||
<span
|
||||
className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D]
|
||||
${isActive ? 'rotate-45 w-1/2 translate-x-[60%] translate-y-[6px]' : 'rotate-0 w-full'}
|
||||
`}
|
||||
></span>
|
||||
<span
|
||||
className={`w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D]
|
||||
${isActive && 'rotate-180'}
|
||||
`}
|
||||
></span>
|
||||
<span
|
||||
className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D]
|
||||
${isActive ? '-rotate-45 w-1/2 translate-x-[60%] translate-y-[-6px]' : 'rotate-0 w-full'}
|
||||
`}
|
||||
></span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonMenu
|
||||
@@ -0,0 +1,46 @@
|
||||
import { listNav } from "@/constans";
|
||||
import { Button } from "@mui/material";
|
||||
import Link from "next/link";
|
||||
import { isActiveURL } from "@/helper";
|
||||
|
||||
function Col({ isActive, setIsActive }) {
|
||||
return (
|
||||
<div className="flex lg:hidden">
|
||||
{/* <Button variant="text" className="!p-0.5">
|
||||
<MenuHead />
|
||||
</Button> */}
|
||||
|
||||
<div className={`
|
||||
fixed pb-[31px] pt-[64px] pl-[24px] padding-responsive top-[-12px] sm:top-[-21px]
|
||||
md:top-[-30px] lg:top-[-40px] w-[85%] h-screen bg-[#FAFAFA] transition-all duration-500
|
||||
${isActive ? 'right-0' : '-right-[85%]'}
|
||||
`}>
|
||||
<ul className="flex flex-col items-start justify-center gap-[30px] mt-[78px] mr-[16px]">
|
||||
{listNav.map(nav => (
|
||||
<li
|
||||
key={nav.id}
|
||||
className="w-full"
|
||||
>
|
||||
<Link
|
||||
href={nav.link}
|
||||
className="w-full"
|
||||
>
|
||||
<Button className={`
|
||||
${isActiveURL(nav.link.replace('/', ''), name) ?
|
||||
'!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]' :
|
||||
'!text-[#525252]'
|
||||
}
|
||||
!text-[16px] !w-full !flex !justify-start !font-medium !py-2.5 !px-4
|
||||
`}>
|
||||
{nav.name}
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Col
|
||||
Reference in New Issue
Block a user