add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { Button } from "@mui/material";
|
||||
import Logo from "@/app/component/Logo";
|
||||
@@ -11,60 +11,49 @@ import BgGray from "./list/col/BgGray";
|
||||
import UserLogin from "@/components/icons/UserLogin";
|
||||
|
||||
function Header({ name }) {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-[#FFF] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
|
||||
>
|
||||
<div className={`
|
||||
return (
|
||||
<div className="bg-[#FFF] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto">
|
||||
<div
|
||||
className={`
|
||||
px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px] flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
|
||||
${isActive ? '!pr-0' : '!px-4'}
|
||||
`}>
|
||||
<div>
|
||||
<BgGray
|
||||
isActive={isActive}
|
||||
setIsActive={setIsActive}
|
||||
/>
|
||||
<Col
|
||||
name={name}
|
||||
isActive={isActive}
|
||||
setIsActive={setIsActive}
|
||||
/>
|
||||
<div className="relative flex flex-row-reverse gap-2">
|
||||
<Logo />
|
||||
<div className="flex lg:hidden z-20">
|
||||
<ButtonMenu
|
||||
isActive={isActive}
|
||||
setIsActive={setIsActive}
|
||||
/>
|
||||
<Logo isAbsolute={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row name={name} />
|
||||
<Link href='/login'>
|
||||
<Button
|
||||
className="!hidden lg:!flex"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
ورود | ثبت نام
|
||||
</Button>
|
||||
<Button
|
||||
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
|
||||
variant="text"
|
||||
color="primary"
|
||||
>
|
||||
<div className="flex lg:hidden">
|
||||
<UserLogin />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
${isActive ? "!pr-0" : "!px-4"}
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
<BgGray isActive={isActive} setIsActive={setIsActive} />
|
||||
<Col name={name} isActive={isActive} setIsActive={setIsActive} />
|
||||
<div className="relative flex flex-row-reverse gap-2">
|
||||
<Logo />
|
||||
<div className="flex lg:hidden z-20">
|
||||
<ButtonMenu isActive={isActive} setIsActive={setIsActive} />
|
||||
<Logo isAbsolute={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<Row name={name} />
|
||||
<Link href="/login">
|
||||
<Button
|
||||
className="!hidden lg:!flex"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
ورود | ثبت نام
|
||||
</Button>
|
||||
<Button
|
||||
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
|
||||
variant="text"
|
||||
color="primary"
|
||||
>
|
||||
<div className="flex lg:hidden">
|
||||
<UserLogin />
|
||||
</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header
|
||||
export default Header;
|
||||
|
||||
@@ -3,25 +3,27 @@ import { isActiveURL } from "@/helper";
|
||||
import Link from "next/link";
|
||||
|
||||
function Row({ name }) {
|
||||
return (
|
||||
<ul className="hidden lg:flex items-center justify-center gap-[30px] xl:gap-[40px]">
|
||||
{listNav.map(nav => (
|
||||
<li
|
||||
key={nav.id}
|
||||
>
|
||||
<Link
|
||||
href={nav.link}
|
||||
className={`
|
||||
${isActiveURL(nav.link.replace('/', ''), name) ? '!text-[#526CAC]' : 'text-[#525252]'}
|
||||
return (
|
||||
<ul className="hidden lg:flex items-center justify-center gap-[30px] xl: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>
|
||||
)
|
||||
>
|
||||
{nav.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Row
|
||||
export default Row;
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
function BgGray({ isActive, setIsActive }) {
|
||||
return (
|
||||
<div
|
||||
onClick={() => setIsActive(false)}
|
||||
className={`
|
||||
${isActive ? 'bg-[#232323] opacity-40 flex' : 'bg-transparent opacity-40 hidden'}
|
||||
return (
|
||||
<div
|
||||
onClick={() => setIsActive(false)}
|
||||
className={`
|
||||
${
|
||||
isActive
|
||||
? "bg-[#232323] opacity-40 flex"
|
||||
: "bg-transparent opacity-40 hidden"
|
||||
}
|
||||
absolute z-[5] cursor-pointer transition-all duration-500 left-0 top-[-12px] sm:top-[-21px] md:top-[-30px] lg:top-[-40px] w-screen h-screen
|
||||
`}
|
||||
></div>
|
||||
)
|
||||
></div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BgGray
|
||||
export default BgGray;
|
||||
|
||||
@@ -1,28 +1,36 @@
|
||||
import { Button } from "@mui/material"
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function ButtonMenu({ isActive, setIsActive }) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => setIsActive(!isActive)}
|
||||
className="!py-[6px] !px-[2px] !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-[8px]' : 'rotate-0 w-full'}
|
||||
return (
|
||||
<Button
|
||||
onClick={() => setIsActive(!isActive)}
|
||||
className="!py-[6px] !px-[2px] !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-[8px]"
|
||||
: "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={`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-[-8px]' : 'rotate-0 w-full'}
|
||||
></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-[-8px]"
|
||||
: "rotate-0 w-full"
|
||||
}
|
||||
`}
|
||||
></span>
|
||||
</Button>
|
||||
)
|
||||
></span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonMenu
|
||||
export default ButtonMenu;
|
||||
|
||||
@@ -4,43 +4,45 @@ import Link from "next/link";
|
||||
import { isActiveURL } from "@/helper";
|
||||
|
||||
function Col({ isActive, setIsActive, name }) {
|
||||
return (
|
||||
<div className="flex lg:hidden">
|
||||
{/* <Button variant="text" className="!p-0.5">
|
||||
return (
|
||||
<div className="flex lg:hidden">
|
||||
{/* <Button variant="text" className="!p-0.5">
|
||||
<MenuHead />
|
||||
</Button> */}
|
||||
<div className={`
|
||||
<div
|
||||
className={`
|
||||
fixed pb-[31px] pt-[64px] pl-[24px] padding-responsive top-[-12px] sm:top-[-21px]
|
||||
md:top-[-30px] lg:top-[-40px] w-[85%] z-10 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-[38px]">
|
||||
{listNav.map(nav => (
|
||||
<li
|
||||
key={nav.id}
|
||||
className="w-full"
|
||||
>
|
||||
<Link
|
||||
href={nav.link}
|
||||
className="w-full"
|
||||
>
|
||||
<Button className={`
|
||||
${isActive ? "right-0" : "-right-[85%]"}
|
||||
`}
|
||||
>
|
||||
<ul className="flex flex-col items-start justify-center gap-[30px] mt-[38px]">
|
||||
{listNav.map((nav) => (
|
||||
<li key={nav.id} className="w-full">
|
||||
<Link href={nav.link} className="w-full">
|
||||
<Button
|
||||
className={`
|
||||
!h-10
|
||||
${isActiveURL(nav.link.replace('/', ''), name) ?
|
||||
'!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]' :
|
||||
'!text-[#525252]'
|
||||
${
|
||||
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>
|
||||
)
|
||||
`}
|
||||
>
|
||||
{nav.name}
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Col
|
||||
export default Col;
|
||||
|
||||
Reference in New Issue
Block a user