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;