validation & change deisng sidebar dashboard & add menu to profile & handle menu item in profile & add api

components/layoutPanel/header/MenuProfile.js

@@ -1,20 +1,13 @@
 import { useState } from "react";
-import { Button, Popover } from "@mui/material";
+import { Button } from "@mui/material";
 import ArrowBottomHD from "@/components/icons/ArrowBottomHD";
-import ProfilePA from "@/components/icons/ProfilePA";
-import LogoutP from "@/components/icons/LogoutP";
-import SettingPA from "@/components/icons/SettingPA";
-import CardDA from "@/components/icons/CardDA";
 import Image from "next/image";
+import DetailProfile from "@/app/component/DetailProfile";
 
 function MenuProfile({ data }) {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const handleClick = (event) => setAnchorEl(event.currentTarget);
-  const handleClose = () => setAnchorEl(null);
-
-  const open = Boolean(anchorEl);
-  const id = open ? "simple-popover" : undefined;
 
   return (
     <>
@@ -49,59 +42,7 @@ function MenuProfile({ data }) {
           <ArrowBottomHD />
         </div>
       </Button>
-      <Popover
-        id={id}
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-      >
-        <div className="flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]">
-          <Button
-            fullWidth
-            variant="text"
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
-          >
-            <ProfilePA />
-            پروفایل من
-          </Button>
-          <Button
-            fullWidth
-            variant="text"
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
-          >
-            <CardDA />
-            پرداخت ها
-          </Button>
-          <Button
-            fullWidth
-            variant="text"
-            className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
-          >
-            <SettingPA />
-            تنظیمات
-          </Button>
-          <Button
-            fullWidth
-            color="error"
-            variant="contained"
-            onClick={handleClose}
-            sx={{
-              "&.MuiButtonBase-root": {
-                paddingTop: "8px !important",
-                paddingBottom: "8px !important",
-              },
-            }}
-            className="!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]"
-          >
-            <LogoutP />
-            خروج
-          </Button>
-        </div>
-      </Popover>
+      <DetailProfile anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
     </>
   );
 }