start working on profile

src/core/components/SidebarMenu.jsx

@@ -1,10 +1,12 @@
 "use client";
 import SidebarListItems from "@/core/components/SidebarListItems";
 import { usePermissions } from "@/lib/hooks/usePermissions";
-import { List } from "@mui/material";
+import { Avatar, Box, Divider, IconButton, List, Stack, Typography } 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";
 
 function selectPage(item, route) {
@@ -35,48 +37,48 @@ function reducer(state, action) {
             return state.map((item) =>
                 action.id == item.id
                     ? {
-                          ...item,
-                          showSubitems: !item.showSubitems,
-                      }
-                    : item
+                        ...item,
+                        showSubitems: !item.showSubitems,
+                    }
+                    : item,
             );
         case "COLLAPSE_SUB_ITEMS":
             return state.map((item) => {
                 return item.hasSubitems
                     ? {
-                          ...item,
-                          Subitems: item.Subitems.map((subitem) =>
-                              action.id === subitem.id
-                                  ? {
-                                        ...subitem,
-                                        showSubitems: !subitem.showSubitems,
-                                    }
-                                  : subitem
-                          ),
-                      }
+                        ...item,
+                        Subitems: item.Subitems.map((subitem) =>
+                            action.id === subitem.id
+                                ? {
+                                    ...subitem,
+                                    showSubitems: !subitem.showSubitems,
+                                }
+                                : subitem,
+                        ),
+                    }
                     : item;
             });
         case "COLLAPSE_SUB_SECOND_ITEMS":
             return state.map((item) => {
                 return item.hasSubitems
                     ? {
-                          ...item,
-                          Subitems: item.Subitems.map((subitem) => {
-                              return subitem.hasSubitems
-                                  ? {
-                                        ...subitem,
-                                        Subitems: subitem.Subitems.map((secondSubitem) =>
-                                            action.id === secondSubitem.id
-                                                ? {
-                                                      ...secondSubitem,
-                                                      showSubitems: !secondSubitem.showSubitems,
-                                                  }
-                                                : secondSubitem
-                                        ),
-                                    }
-                                  : subitem;
-                          }),
-                      }
+                        ...item,
+                        Subitems: item.Subitems.map((subitem) => {
+                            return subitem.hasSubitems
+                                ? {
+                                    ...subitem,
+                                    Subitems: subitem.Subitems.map((secondSubitem) =>
+                                        action.id === secondSubitem.id
+                                            ? {
+                                                ...secondSubitem,
+                                                showSubitems: !secondSubitem.showSubitems,
+                                            }
+                                            : secondSubitem,
+                                    ),
+                                }
+                                : subitem;
+                        }),
+                    }
                     : item;
             });
         case "SELECTED":
@@ -105,20 +107,54 @@ const SidebarMenu = () => {
 
     useEffect(() => {
         selectedKey &&
-            document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-            });
+        document.querySelector(`[data-route="${selectedKey}"]`)?.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+        });
     }, [selectedKey]);
 
     return (
-        userPermissions && (
-            <List sx={{ overflow: "auto" }} disablePadding dense>
-                {menuItems.map((menuItem) => {
-                    return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
-                })}
-            </List>
-        )
+        <>
+            <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>
+            {
+                userPermissions && (
+                    <List sx={{ overflow: "auto" }} disablePadding dense>
+                        {menuItems.map((menuItem) => {
+                            return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
+                        })}
+                    </List>
+                )
+            }
+        </>
     );
 };
 export default SidebarMenu;