all tabs page dashboard and responsive
This commit is contained in:
@@ -5,8 +5,9 @@ import MessageD from "@/components/icons/MessageD";
|
||||
import ProfileD from "@/components/icons/ProfileD";
|
||||
import NotificationD from "@/components/icons/NotificationD";
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
|
||||
|
||||
function List({ value, setValue }) {
|
||||
function List({ value, setValue, setIsOpenSide }) {
|
||||
|
||||
const listMenu = [
|
||||
{ name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
|
||||
@@ -25,25 +26,35 @@ function List({ value, setValue }) {
|
||||
key={idx}
|
||||
>
|
||||
<Button
|
||||
className={`!flex !py-[24px] hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
!items-center !justify-start !gap-[8px] !relative before:!absolute before:!right-0
|
||||
className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
||||
!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:!bg-[#5559CE]' :
|
||||
'before:md:!bg-[#5559CE]' :
|
||||
'before:!bg-transparent'
|
||||
}`}
|
||||
onClick={() => setValue(idx)}
|
||||
onClick={() => {
|
||||
setValue(idx);
|
||||
setIsOpenSide(false);
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
<p
|
||||
className={`
|
||||
text-[16px]
|
||||
<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'}
|
||||
`}
|
||||
>{item.name}</p>
|
||||
>{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 w-full"></span>
|
||||
<span className="block bg-[#EFEFEF] h-px mx-[24px] w-[calc(100%-48px)]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user