add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,26 +1,21 @@
|
||||
import Image from "next/image"
|
||||
import Image from "next/image";
|
||||
|
||||
const Namads = [
|
||||
'/assets/images/footer-etehadie.png',
|
||||
'/assets/images/footer-r.png',
|
||||
'/assets/images/footer-namad.png'
|
||||
]
|
||||
"/assets/images/footer-etehadie.png",
|
||||
"/assets/images/footer-r.png",
|
||||
"/assets/images/footer-namad.png",
|
||||
];
|
||||
|
||||
function LogoNamad() {
|
||||
return (
|
||||
<ul className="flex items-center gap-3">
|
||||
{Namads.map((src, idx) => (
|
||||
<li key={idx}>
|
||||
<Image
|
||||
alt="logo"
|
||||
width={48}
|
||||
height={48}
|
||||
src={src}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex items-center gap-3">
|
||||
{Namads.map((src, idx) => (
|
||||
<li key={idx}>
|
||||
<Image alt="logo" width={48} height={48} src={src} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default LogoNamad
|
||||
export default LogoNamad;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { footerL, footerR } from "@/constans";
|
||||
import Logo from "@/app/component/Logo";
|
||||
@@ -17,97 +17,106 @@ import HeadMenu from "./menu/HeadMenu";
|
||||
import ListMenu from "./menu/ListMenu";
|
||||
import { useState } from "react";
|
||||
|
||||
const socialMedias = [
|
||||
<Linkedin />,
|
||||
<Telegram />,
|
||||
<Whatsapp />,
|
||||
<Instagram />
|
||||
]
|
||||
const socialMedias = [<Linkedin />, <Telegram />, <Whatsapp />, <Instagram />];
|
||||
|
||||
const head = [
|
||||
{ icon: <LocationF />, text: 'جستجوی پزشک در شهر شما' },
|
||||
{ icon: <CalendarAddF />, text: 'نوبت گیری سریع و آسان' },
|
||||
{ icon: <StethoscopeF />, text: 'دشبورد اختصاصی برای پزشکان' }
|
||||
]
|
||||
{ icon: <LocationF />, text: "جستجوی پزشک در شهر شما" },
|
||||
{ icon: <CalendarAddF />, text: "نوبت گیری سریع و آسان" },
|
||||
{ icon: <StethoscopeF />, text: "دشبورد اختصاصی برای پزشکان" },
|
||||
];
|
||||
|
||||
function Footer() {
|
||||
const [openMenu, setOpenMenu] = useState({
|
||||
right: false,
|
||||
left: false,
|
||||
});
|
||||
|
||||
const [openMenu, setOpenMenu] = useState({
|
||||
right: false,
|
||||
left: false
|
||||
});
|
||||
const changeMenu = (name) =>
|
||||
setOpenMenu({ ...openMenu, [name]: !openMenu[name] });
|
||||
|
||||
const changeMenu = name => setOpenMenu({ ...openMenu, [name]: !openMenu[name] });
|
||||
|
||||
return (
|
||||
<div className="pb-[11px]">
|
||||
<div className="flex items-center justify-evenly gap-[12px]">
|
||||
{head.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all
|
||||
return (
|
||||
<div className="pb-[11px]">
|
||||
<div className="flex items-center justify-evenly gap-[12px]">
|
||||
{head.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all
|
||||
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
|
||||
>
|
||||
{item.icon}
|
||||
<p className="text-[#2F2F2F] text-center text-[16px] font-medium">{item.text}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
|
||||
<div
|
||||
className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px]
|
||||
>
|
||||
{item.icon}
|
||||
<p className="text-[#2F2F2F] text-center text-[16px] font-medium">
|
||||
{item.text}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
|
||||
<div
|
||||
className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px]
|
||||
flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
|
||||
>
|
||||
{/* Right */}
|
||||
<div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
|
||||
{/* Icon */}
|
||||
<Logo />
|
||||
<p
|
||||
className="w-full lg:w-fit text-[#616161] text-[14px] font-normal"
|
||||
>724 یک وبسایت نوبت دهی آنلاین می باشد که<br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران فراهم کرده<br className="hidden lg:flex" /> است. </p>
|
||||
<div className="hidden lg:flex">
|
||||
<LogoNamad />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center */}
|
||||
<div className="w-full lg:w-fit">
|
||||
<HeadMenu title={footerR[0]} isOpen={openMenu.right} name='right' changeMenu={changeMenu} />
|
||||
<ListMenu list={footerR} isOpen={openMenu.right} />
|
||||
</div>
|
||||
<div className="w-full lg:w-fit">
|
||||
<HeadMenu title={footerL[0]} isOpen={openMenu.left} name='left' changeMenu={changeMenu} />
|
||||
<ListMenu list={footerL} isOpen={openMenu.left} />
|
||||
</div>
|
||||
|
||||
{/* Left */}
|
||||
<div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">
|
||||
<p className="text-[#3B3B3B] w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
|
||||
همراه با ما باشید:
|
||||
</p>
|
||||
<ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
|
||||
{socialMedias.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
|
||||
>
|
||||
<Link
|
||||
href='/'
|
||||
className="min-h-fit"
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex lg:hidden justify-center w-full mt-2">
|
||||
<LogoNamad />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-[#7E7E7E] text-[12px] font-normal">کلیه حقوق وبسایت برای این شرکت می باشد.</p>
|
||||
>
|
||||
{/* Right */}
|
||||
<div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
|
||||
{/* Icon */}
|
||||
<Logo />
|
||||
<p className="w-full lg:w-fit text-[#616161] text-[14px] font-normal">
|
||||
724 یک وبسایت نوبت دهی آنلاین می باشد که
|
||||
<br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران
|
||||
فراهم کرده
|
||||
<br className="hidden lg:flex" /> است.{" "}
|
||||
</p>
|
||||
<div className="hidden lg:flex">
|
||||
<LogoNamad />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
{/* Center */}
|
||||
<div className="w-full lg:w-fit">
|
||||
<HeadMenu
|
||||
title={footerR[0]}
|
||||
isOpen={openMenu.right}
|
||||
name="right"
|
||||
changeMenu={changeMenu}
|
||||
/>
|
||||
<ListMenu list={footerR} isOpen={openMenu.right} />
|
||||
</div>
|
||||
<div className="w-full lg:w-fit">
|
||||
<HeadMenu
|
||||
title={footerL[0]}
|
||||
isOpen={openMenu.left}
|
||||
name="left"
|
||||
changeMenu={changeMenu}
|
||||
/>
|
||||
<ListMenu list={footerL} isOpen={openMenu.left} />
|
||||
</div>
|
||||
|
||||
{/* Left */}
|
||||
<div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">
|
||||
<p className="text-[#3B3B3B] w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
|
||||
همراه با ما باشید:
|
||||
</p>
|
||||
<ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
|
||||
{socialMedias.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
|
||||
>
|
||||
<Link href="/" className="min-h-fit">
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex lg:hidden justify-center w-full mt-2">
|
||||
<LogoNamad />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-[#7E7E7E] text-[12px] font-normal">
|
||||
کلیه حقوق وبسایت برای این شرکت می باشد.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer
|
||||
export default Footer;
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
import ArrowDownF from "@/components/icons/ArrowDownF"
|
||||
import { Button } from "@mui/material"
|
||||
import ArrowDownF from "@/components/icons/ArrowDownF";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function HeadMenu({ title, name, isOpen, changeMenu }) {
|
||||
return (
|
||||
<Button
|
||||
className="!flex lg:!hidden !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
|
||||
onClick={() => changeMenu(name)}
|
||||
>
|
||||
<p className="text-[#262866] text-[14px] font-medium">{title}</p>
|
||||
<div className={`
|
||||
return (
|
||||
<Button
|
||||
className="!flex lg:!hidden !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
|
||||
onClick={() => changeMenu(name)}
|
||||
>
|
||||
<p className="text-[#262866] text-[14px] font-medium">{title}</p>
|
||||
<div
|
||||
className={`
|
||||
transition-all duration-500
|
||||
${isOpen ? 'rotate-180' : 'rotate-0'}
|
||||
`}>
|
||||
<ArrowDownF />
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
${isOpen ? "rotate-180" : "rotate-0"}
|
||||
`}
|
||||
>
|
||||
<ArrowDownF />
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeadMenu
|
||||
export default HeadMenu;
|
||||
|
||||
@@ -1,25 +1,31 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
function ListMenu({ list, isOpen }) {
|
||||
return (
|
||||
<ul className={`
|
||||
<ul
|
||||
className={`
|
||||
mt-3 lg:mt-0 w-full lg:w-fit lg:!max-h-fit flex flex-col overflow-hidden transition-all duration-500 gap-3
|
||||
${isOpen ? 'max-h-[150px]' : 'max-h-0'}
|
||||
`}>
|
||||
${isOpen ? "max-h-[150px]" : "max-h-0"}
|
||||
`}
|
||||
>
|
||||
{list.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className={`
|
||||
relative cursor-pointer after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
|
||||
${idx === 0 ?
|
||||
'hidden lg:flex text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' :
|
||||
'text-[#616161] border-transparent font-normal'}
|
||||
${
|
||||
idx === 0
|
||||
? "hidden lg:flex text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5"
|
||||
: "text-[#616161] border-transparent font-normal"
|
||||
}
|
||||
text-[16px] w-fit
|
||||
`}
|
||||
>{item}</li>
|
||||
>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default ListMenu
|
||||
export default ListMenu;
|
||||
|
||||
@@ -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;
|
||||
|
||||
+66
-46
@@ -1,58 +1,78 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import Footer from './footer';
|
||||
import Header from './header';
|
||||
import Footer from "./footer";
|
||||
import Header from "./header";
|
||||
|
||||
// AOS
|
||||
import Aos from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
import { useEffect } from "react";
|
||||
import Sidebar from './sidebar';
|
||||
import Sidebar from "./sidebar";
|
||||
|
||||
function Layout({ children, isTurnsDetails, setIsTurnsDetails, title, name, isOpenSide, setIsOpenSide, disableFooter, isSidebar, user, value, setValue }) {
|
||||
function Layout({
|
||||
children,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
title,
|
||||
name,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
disableFooter,
|
||||
isSidebar,
|
||||
user,
|
||||
value,
|
||||
setValue,
|
||||
}) {
|
||||
useEffect(() => {
|
||||
Aos.init({ duration: 1000 });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
Aos.init({ duration: 1000 });
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<main className={`w-full min-h-screen
|
||||
${disableFooter && 'pb-[calc(16px_+_80px)] sm:pb-[calc(52px_+_80px)] md:pb-[80px]'}`}>
|
||||
<header className="w-full fixed top-[12px] sm:top-[21px] md:top-[30px] lg:top-[40px] right-1/2 translate-x-1/2 padding-responsive z-[10]">
|
||||
<Header name={name} />
|
||||
</header>
|
||||
<section className={`
|
||||
return (
|
||||
<div>
|
||||
<main
|
||||
className={`w-full min-h-screen
|
||||
${
|
||||
disableFooter &&
|
||||
"pb-[calc(16px_+_80px)] sm:pb-[calc(52px_+_80px)] md:pb-[80px]"
|
||||
}`}
|
||||
>
|
||||
<header className="w-full fixed top-[12px] sm:top-[21px] md:top-[30px] lg:top-[40px] right-1/2 translate-x-1/2 padding-responsive z-[10]">
|
||||
<Header name={name} />
|
||||
</header>
|
||||
<section
|
||||
className={`
|
||||
opacity-page
|
||||
${isSidebar &&
|
||||
'padding-responsive min-h-screen flex items-stretch justify-center gap-[12px] lg:gap-[24px] pt-[76px] sm:pt-[109px] mt:pt-[142px] lg:pt-[176px]'
|
||||
${
|
||||
isSidebar &&
|
||||
"padding-responsive min-h-screen flex items-stretch justify-center gap-[12px] lg:gap-[24px] pt-[76px] sm:pt-[109px] mt:pt-[142px] lg:pt-[176px]"
|
||||
}
|
||||
`}>
|
||||
{isSidebar && (
|
||||
<Sidebar
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
{disableFooter ? undefined : (
|
||||
<footer className='bg-[#F5F5F5] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover'>
|
||||
<div className='pt-[44px] bg-[rgba(255,255,255,0.45)]'>
|
||||
<div className='padding-responsive'>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
`}
|
||||
>
|
||||
{isSidebar && (
|
||||
<Sidebar
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
{disableFooter ? undefined : (
|
||||
<footer className="bg-[#F5F5F5] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
|
||||
<div className="pt-[44px] bg-[rgba(255,255,255,0.45)]">
|
||||
<div className="padding-responsive">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout
|
||||
export default Layout;
|
||||
|
||||
@@ -1,33 +1,41 @@
|
||||
import CalendarAdD from "@/components/icons/CalendarAdD"
|
||||
import CardTickD from "@/components/icons/CardTickD"
|
||||
import CalendarAdD from "@/components/icons/CalendarAdD";
|
||||
import CardTickD from "@/components/icons/CardTickD";
|
||||
|
||||
function Cards({ user }) {
|
||||
return (
|
||||
<div className='flex md:hidden mt-[16px] mb-[24px] items-start justify-center gap-[16px]'>
|
||||
<div className='py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[6px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
|
||||
<div className='bg-[#5559CE] rounded-full p-[7px]'>
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CardTickD />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[14px] font-medium'>{user.total_transactions} <span className='text-[11px]'>تومان</span></p>
|
||||
<p className='text-[#616161] text-nowrap text-[12px] font-normal'>مجموع تراکنش ها</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[12px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
|
||||
<div className='bg-[#FFC051] rounded-full p-[7px]'>
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[14px] font-medium'>{user.number_of_turns}</p>
|
||||
<p className='text-[#616161] text-nowrap text-[12px] font-normal'>تعداد نوبت های شما</p>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex md:hidden mt-[16px] mb-[24px] items-start justify-center gap-[16px]">
|
||||
<div className="py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[6px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
||||
<div className="bg-[#5559CE] rounded-full p-[7px]">
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CardTickD />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<div className="flex flex-col gap-[8px] items-start justify-start">
|
||||
<p className="text-[#3B3B3B] text-nowrap text-[14px] font-medium">
|
||||
{user.total_transactions} <span className="text-[11px]">تومان</span>
|
||||
</p>
|
||||
<p className="text-[#616161] text-nowrap text-[12px] font-normal">
|
||||
مجموع تراکنش ها
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-[10px] w-1/2 sm:w-[170px] flex items-center justify-start gap-[12px] px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
||||
<div className="bg-[#FFC051] rounded-full p-[7px]">
|
||||
<div className="w-[18px] sm:w-[20px] md:w-[22px] lg:w-[24px] h-[18px] sm:h-[20px] md:h-[22px] lg:h-[24px]">
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] items-start justify-start">
|
||||
<p className="text-[#3B3B3B] text-nowrap text-[14px] font-medium">
|
||||
{user.number_of_turns}
|
||||
</p>
|
||||
<p className="text-[#616161] text-nowrap text-[12px] font-normal">
|
||||
تعداد نوبت های شما
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cards
|
||||
export default Cards;
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
import Image from "next/image"
|
||||
import Image from "next/image";
|
||||
|
||||
function Head({ user }) {
|
||||
return (
|
||||
<div
|
||||
className="w-full flex flex-row md:flex-col items-center justify-center md:justify-start gap-[12px] md:gap-[4px]"
|
||||
>
|
||||
<Image
|
||||
className="rounded-full border-[3px] border-solid border-[#F8F8FF] shadow-[0px_1px_25.6px_0px_rgba(85,_89,_205,_0.20)]"
|
||||
src={user.profile}
|
||||
alt="profile"
|
||||
height={73}
|
||||
width={73}
|
||||
/>
|
||||
<div className="flex flex-col items-start md:items-center justify-center gap-[8px] md:gap-[4px]">
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{user.name}</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{user.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full flex flex-row md:flex-col items-center justify-center md:justify-start gap-[12px] md:gap-[4px]">
|
||||
<Image
|
||||
className="rounded-full border-[3px] border-solid border-[#F8F8FF] shadow-[0px_1px_25.6px_0px_rgba(85,_89,_205,_0.20)]"
|
||||
src={user.profile}
|
||||
alt="profile"
|
||||
height={73}
|
||||
width={73}
|
||||
/>
|
||||
<div className="flex flex-col items-start md:items-center justify-center gap-[8px] md:gap-[4px]">
|
||||
<p className="text-[#3B3B3B] text-[14px] font-bold">{user.name}</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{user.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -9,72 +9,74 @@ import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
|
||||
import { useState } from "react";
|
||||
import ModalLogout from "./ModalLogout";
|
||||
|
||||
function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSide }) {
|
||||
function List({
|
||||
value,
|
||||
setValue,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
const listMenu = [
|
||||
{ name: "حساب کاربری", icon: <ProfileD active={value === 0} /> },
|
||||
{ name: "نوبت های من", icon: <CalndarD active={value === 1} /> },
|
||||
{ name: "تراکنش های من", icon: <CardD active={value === 2} /> },
|
||||
{ name: "نظرات من", icon: <MessageD active={value === 3} /> },
|
||||
{ name: "پیام ها", icon: <NotificationD active={value === 4} /> },
|
||||
{ name: "خروج", icon: <LogoutD active={value === 5} /> },
|
||||
];
|
||||
|
||||
const listMenu = [
|
||||
{ name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
|
||||
{ name: 'نوبت های من', icon: <CalndarD active={value === 1} /> },
|
||||
{ name: 'تراکنش های من', icon: <CardD active={value === 2} /> },
|
||||
{ name: 'نظرات من', icon: <MessageD active={value === 3} /> },
|
||||
{ name: 'پیام ها', icon: <NotificationD active={value === 4} /> },
|
||||
{ name: 'خروج', icon: <LogoutD active={value === 5} /> },
|
||||
];
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<ul className="flex flex-col items-start justify-start w-full">
|
||||
<ModalLogout
|
||||
open={open}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
{listMenu.map((item, idx) => (
|
||||
<li
|
||||
className="w-full"
|
||||
key={idx}
|
||||
>
|
||||
<Button
|
||||
className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
return (
|
||||
<ul className="flex flex-col items-start justify-start w-full">
|
||||
<ModalLogout open={open} handleClose={handleClose} />
|
||||
{listMenu.map((item, idx) => (
|
||||
<li className="w-full" key={idx}>
|
||||
<Button
|
||||
className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
transition-all duration-300 before:transition-all before:duration-300
|
||||
!relative before:!absolute before:!right-0 !flex !justify-between !items-center
|
||||
before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
|
||||
${value === idx ?
|
||||
'before:md:!bg-[#5559CE]' :
|
||||
'before:!bg-transparent'
|
||||
${
|
||||
value === idx
|
||||
? "before:md:!bg-[#5559CE]"
|
||||
: "before:!bg-transparent"
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIsOpenSide(false);
|
||||
!isTurnsDetails && setIsTurnsDetails(false);
|
||||
if (idx === 5)
|
||||
handleOpen()
|
||||
else
|
||||
setValue(idx);
|
||||
}}
|
||||
>
|
||||
<div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
|
||||
<div className="w-[24px] h-[24px]">
|
||||
{item.icon}
|
||||
</div>
|
||||
<p
|
||||
className={`
|
||||
onClick={() => {
|
||||
setIsOpenSide(false);
|
||||
!isTurnsDetails && setIsTurnsDetails(false);
|
||||
if (idx === 5) handleOpen();
|
||||
else setValue(idx);
|
||||
}}
|
||||
>
|
||||
<div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">
|
||||
<div className="w-[24px] h-[24px]">{item.icon}</div>
|
||||
<p
|
||||
className={`
|
||||
text-[16px] transition-all duration-500
|
||||
${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
|
||||
${
|
||||
value === idx
|
||||
? "text-[#5559CE] font-bold"
|
||||
: "text-[#7E7E7E] font-normal"
|
||||
}
|
||||
`}
|
||||
>{item.name}</p>
|
||||
</div>
|
||||
<div className="flex md:hidden">
|
||||
<ArrowLeftSideBar active={value === idx} />
|
||||
</div>
|
||||
</Button>
|
||||
{listMenu.length > idx + 1 && (
|
||||
<span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
>
|
||||
{item.name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex md:hidden">
|
||||
<ArrowLeftSideBar active={value === idx} />
|
||||
</div>
|
||||
</Button>
|
||||
{listMenu.length > idx + 1 && (
|
||||
<span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,48 +1,45 @@
|
||||
import { styleDefault } from '@/mui';
|
||||
import { Box, Button, Modal } from '@mui/material';
|
||||
import CloseModalD from '@/components/icons/CloseModalD';
|
||||
import { styleDefault } from "@/mui";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
|
||||
function ModalLogout({ open, handleClose }) {
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className='flex items-center justify-between w-full'>
|
||||
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>خروج</p>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
className='!p-1'
|
||||
variant='text'
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا مطمئن هستید که میخواهید از حساب کاربری خود خارج شوید؟</p>
|
||||
<div className='flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium'
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant='contained'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium'
|
||||
>
|
||||
خروج
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
)
|
||||
return (
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
خروج
|
||||
</p>
|
||||
<Button onClick={handleClose} className="!p-1" variant="text">
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
|
||||
آیا مطمئن هستید که میخواهید از حساب کاربری خود خارج شوید؟
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
|
||||
>
|
||||
خروج
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalLogout
|
||||
export default ModalLogout;
|
||||
|
||||
@@ -2,41 +2,50 @@ import Cards from "./Cards";
|
||||
import Head from "./Head";
|
||||
import List from "./List";
|
||||
|
||||
function Sidebar({ user, value, isTurnsDetails, setIsTurnsDetails, setValue, isOpenSide, setIsOpenSide }) {
|
||||
|
||||
return (
|
||||
// ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
|
||||
<div className={`
|
||||
function Sidebar({
|
||||
user,
|
||||
value,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
return (
|
||||
// ${open ? 'md:w-[39%]' : 'min-w-[80px]'}
|
||||
<div
|
||||
className={`
|
||||
md:block absolute md:relative flex-1 z-[7] w-full sm:bg-[#FAFAFA] sm:px-[24px] md:w-[32%] lg:w-[28%]
|
||||
bg-[#FAFAFA] padding-responsive transition-all duration-700
|
||||
h-screen md:h-auto pt-[24px] md:pt-0
|
||||
z-5 top-[60px] sm:top-[77px] md:top-0 md:px-0
|
||||
${isOpenSide ?
|
||||
'right-0' :
|
||||
'md:flex -right-full md:right-0'}
|
||||
`}>
|
||||
<aside
|
||||
className="relative md:sticky top-0 h-fit
|
||||
${isOpenSide ? "right-0" : "md:flex -right-full md:right-0"}
|
||||
`}
|
||||
>
|
||||
<aside
|
||||
className="relative md:sticky top-0 h-fit
|
||||
md:top-[110px] lg:top-[calc(40px_+_58px_+_78px)] w-full"
|
||||
>
|
||||
<div className="
|
||||
>
|
||||
<div
|
||||
className="
|
||||
pt-0 md:pt-[10px] pb-[26px] bg-[#FAFAFA] sm:bg-[#FAFAFA] md:bg-[#FFF] shadow-none
|
||||
md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]
|
||||
">
|
||||
<Head user={user} />
|
||||
<Cards user={user} />
|
||||
<List
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
"
|
||||
>
|
||||
<Head user={user} />
|
||||
<Cards user={user} />
|
||||
<List
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
export default Sidebar;
|
||||
|
||||
Reference in New Issue
Block a user