complete profile part and start working on update profile and changing password

src/core/components/SidebarMenu.jsx

@@ -1,13 +1,12 @@
 "use client";
 import SidebarListItems from "@/core/components/SidebarListItems";
 import { usePermissions } from "@/lib/hooks/usePermissions";
-import { Avatar, Box, Divider, IconButton, List, Stack, Typography } from "@mui/material";
+import { List } from "@mui/material";
 import { usePathname } from "next/navigation";
 import { useEffect, useReducer, useState } from "react";
 import { filterMenuItems } from "../utils/filterMenuItems";
-import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
-import ModeEditIcon from "@mui/icons-material/ModeEdit";
 import { pageMenu } from "../utils/pageMenu";
+import Profile from "@/core/components/Profile";
 
 function selectPage(item, route) {
     if (item.type === "page") {
@@ -115,36 +114,7 @@ const SidebarMenu = () => {
 
     return (
         <>
-            <Stack sx={{ px: 2 }}>
-                <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
-                    <Avatar
-                        alt="User Image"
-                        src=""
-                        sx={{ width: 56, height: 56 }}
-                    />
-                    <Stack sx={{ ml: 1 }}>
-                        <Box sx={{ display: "flex", alignItems: "end", gap: 0.7 }}>
-                            <Typography variant="h6">شرکت وایتل</Typography>
-                            <Typography variant="subtitle2" color="#757575">(userName)</Typography>
-                        </Box>
-                        <Typography variant="caption">.: اداره کل ستاد :.</Typography>
-                    </Stack>
-                </Box>
-                <Box sx={{ display: "flex", alignItems: "center", my: 0.5 }}>
-                    <Typography variant="button" color="#757575">آخرین ورود</Typography>
-                    <Divider sx={{ mx: 2, flexGrow: 1 }} />
-                    <Typography variant="subtitle2" color="#757575">1 ساعت پیش</Typography>
-                </Box>
-                <Box sx={{ display: "flex", justifyContent: "center" }}>
-                    <IconButton aria-label="log out" color="error">
-                        <PowerSettingsNewIcon />
-                    </IconButton>
-                    <Divider orientation="vertical" variant="middle" flexItem />
-                    <IconButton aria-label="edit profile" color="primary">
-                        <ModeEditIcon />
-                    </IconButton>
-                </Box>
-            </Stack>
+            <Profile />
             {
                 userPermissions && (
                     <List sx={{ overflow: "auto" }} disablePadding dense>