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

components/layout/header/Content.js

@@ -7,8 +7,8 @@ import Row from "./list/Row";
 import Col from "./list/col";
 import ButtonMenu from "./list/col/ButtonMenu";
 import BgGray from "./list/col/BgGray";
-import UserLogin from "@/components/icons/UserLogin";
 import { useState } from "react";
+import ProfileUser from "./profile";
 
 function Content({ matchedCity, name, logged }) {
   const [isActive, setIsActive] = useState(false);
@@ -34,15 +34,7 @@ function Content({ matchedCity, name, logged }) {
       </div>
       <Row name={name} />
       {logged ? (
-        <Link href="/dashboard">
-          <Button
-            className={`!flex !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
-            variant="text"
-            color="primary"
-          >
-            <UserLogin />
-          </Button>
-        </Link>
+        <ProfileUser />
       ) : (
         <Link href="/login">
           <Button variant="outlined" color="primary">

components/layout/header/profile/index.js

@@ -0,0 +1,28 @@
+import DetailProfile from "@/app/component/DetailProfile";
+import UserLogin from "@/components/icons/UserLogin";
+import { removeToken } from "@/utils";
+import { Button } from "@mui/material";
+import { useState } from "react";
+
+function ProfileUser() {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+  const handleClose = () => setAnchorEl(null);
+
+  return (
+    <>
+      <Button
+        variant="text"
+        color="primary"
+        onClick={handleClick}
+        className={`!flex !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
+      >
+        <UserLogin />
+      </Button>
+      <DetailProfile anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
+    </>
+  );
+}
+
+export default ProfileUser;

components/layout/sidebar/List.js

@@ -9,7 +9,7 @@ import NotificationD from "@/components/icons/NotificationD";
 import { Button } from "@mui/material";
 import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
 import { useState } from "react";
-import ModalLogout from "./ModalLogout";
+import ModalLogout from "../../../app/component/ModalLogout";
 
 function List({
   value,

components/layout/sidebar/ModalLogout.js

@@ -1,54 +0,0 @@
-import { styleDefault } from "@/mui";
-import { Box, Button, Modal } from "@mui/material";
-import CloseModalD from "@/components/icons/CloseModalD";
-import { removeToken } from "@/utils";
-import { useRouter } from "next/navigation";
-
-function ModalLogout({ open, handleClose }) {
-  const router = useRouter();
-  const logout = () => {
-    removeToken();
-    router.replace("/login");
-    handleClose();
-  };
-
-  return (
-    <Modal open={open} onClose={handleClose}>
-      <Box
-        sx={styleDefault}
-        className="!w-fit dark:!bg-[#222433] sm-modal dark:!shadow-[0px_4px_25px_10px_#1F1D2B] !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] dark:text-[#D7D8ED] 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 dark:bg-[#343645] bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
-        <p className="text-[#525252] text-[12px] dark:text-[#A1A1A1] 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] dark:!bg-[#C7CEF4] dark:!text-[#5559CE] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] 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={logout}
-            className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] 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;