RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/update profile sidebar

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2024-09-16 07:59:19 +00:00
parent 3e8abb7580
commit 9387f85cf7
19 changed files with 230 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/layouts/dashboard/headerWithSidebar/HeaderMenu/index.jsx
View File

@@ -19,32 +19,23 @@ const HeaderMenu = ({ menu }) => {
<Button
color="inherit"
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
endIcon={open ? <ExpandLess /> : <ExpandMore />}
>
{menu.title}
</Button>
<Menu
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
<Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
{menu.subMenu.flatMap((subMenu, index) => [
...subMenu.map(sub => (
<MenuItem
component={NextLink}
href={sub.href}
key={sub.title}
onClick={handleClose}
>
...subMenu.map((sub) => (
<MenuItem component={NextLink} href={sub.href} key={sub.title} onClick={handleClose}>
<ListItemIcon>
<Link fontSize="small" />
</ListItemIcon>
<ListItemText>{sub.title}</ListItemText>
</MenuItem>
)),
index < menu.subMenu.length - 1 && <Divider key={`divider-${index}`} />
index < menu.subMenu.length - 1 && <Divider key={`divider-${index}`} />,
])}
</Menu>
</>

25
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarBadge.jsx
View File

@@ -1,22 +1,19 @@
import { getValueByPath } from "@/core/utils/getValueByPath";
import { useSidebarBadge } from "@/lib/hooks/useSidebarBadge"
import { Chip } from "@mui/material"
import { useSidebarBadge } from "@/lib/hooks/useSidebarBadge";
import { Chip } from "@mui/material";
import { useEffect, useState } from "react";
const SidebarBadge = ({ badge, chipProps = {} }) => {
const { data } = useSidebarBadge()
const [value, setValue] = useState()
const { data } = useSidebarBadge();
const [value, setValue] = useState();
useEffect(() => {
setValue(getValueByPath(data, badge))
}, [data, badge])
setValue(getValueByPath(data, badge));
}, [data, badge]);
if (!data) return null;
if (!value) return null;
if (!data) return null
if (!value) return null
return (
<Chip label={(value).toLocaleString("fa-IR")} size="small" {...chipProps} />
)
}
export default SidebarBadge
return <Chip label={value.toLocaleString("fa-IR")} size="small" {...chipProps} />;
};
export default SidebarBadge;

6
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarListItems.jsx
View File

@@ -31,8 +31,10 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
</ListItemIcon>
<ListItemText primary={menuItem.label} />
{menuItem.badges && (
<Stack direction={'row'} sx={{ px: .5 }} spacing={.5}>
{menuItem.badges.map((badge, i) => <SidebarBadge chipProps={{ color: 'primary' }} key={i} badge={badge} />)}
<Stack direction={"row"} sx={{ px: 0.5 }} spacing={0.5}>
{menuItem.badges.map((badge, i) => (
<SidebarBadge chipProps={{ color: "primary" }} key={i} badge={badge} />
))}
</Stack>
)}
{menuItem.hasSubitems ? menuItem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}

47
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarMenu.jsx
View File

@@ -28,9 +28,7 @@ function selectPage(item, route) {
function toggleSubitems(items, actionId) {
return items.map((item) =>
actionId === item.id
? { ...item, showSubitems: !item.showSubitems }
: { ...item, showSubitems: false }
actionId === item.id ? { ...item, showSubitems: !item.showSubitems } : { ...item, showSubitems: false }
);
}
@@ -48,28 +46,23 @@ function reducer(state, action) {
case "COLLAPSE_SUB_ITEMS":
return state.map((item) =>
item.hasSubitems
? { ...item, Subitems: toggleSubitems(item.Subitems, action.id) }
: item
item.hasSubitems ? { ...item, Subitems: toggleSubitems(item.Subitems, action.id) } : item
);
case "COLLAPSE_SUB_SECOND_ITEMS":
return state.map((item) =>
item.hasSubitems
? {
...item,
Subitems: item.Subitems.map((subitem) =>
subitem.hasSubitems
? {
...subitem,
Subitems: toggleSubitems(
subitem.Subitems,
action.id
),
}
: subitem
),
}
...item,
Subitems: item.Subitems.map((subitem) =>
subitem.hasSubitems
? {
...subitem,
Subitems: toggleSubitems(subitem.Subitems, action.id),
}
: subitem
),
}
: item
);
@@ -108,15 +101,13 @@ const SidebarMenu = () => {
return (
<>
<Profile />
{
userPermissions && (
<List sx={{ overflow: "auto", flex: 1 }} disablePadding dense>
{menuItems.map((menuItem) => {
return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
})}
</List>
)
}
{userPermissions && (
<List sx={{ overflow: "auto", flex: 1 }} disablePadding dense>
{menuItems.map((menuItem) => {
return <SidebarListItems dispatch={dispatch} key={menuItem.id} menuItem={menuItem} />;
})}
</List>
)}
</>
);
};

16
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarSubitems.jsx
View File

@@ -29,11 +29,21 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
</ListItemIcon>
<ListItemText primary={subitem.label} />
{subitem.badges && (
<Stack direction={'row'} sx={{ px: .5 }} spacing={.5}>
{subitem.badges.map((badge, i) => <SidebarBadge key={i} badge={badge} />)}
<Stack direction={"row"} sx={{ px: 0.5 }} spacing={0.5}>
{subitem.badges.map((badge, i) => (
<SidebarBadge key={i} badge={badge} />
))}
</Stack>
)}
{subitem.hasSubitems ? subitem.showSubitems ? <ExpandLess /> : <ExpandMore /> : <Box sx={{ width: 29 }} />}
{subitem.hasSubitems ? (
subitem.showSubitems ? (
<ExpandLess />
) : (
<ExpandMore />
)
) : (
<Box sx={{ width: 29 }} />
)}
</ListItemButton>
</ListItem>
<Collapse in={subitem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>

21
src/components/layouts/dashboard/headerWithSidebar/index.jsx
View File

@@ -10,7 +10,7 @@ import { headerMenu } from "@/core/utils/headerMenu";
import SidebarMenu from "./Sidebar/SidebarMenu";
const drawerWidth = 300;
const headersHeight = 136
const headersHeight = 136;
const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
flexGrow: 1,
@@ -66,9 +66,14 @@ const HeaderWithSidebar = ({ children }) => {
setOpen(false);
};
return (
<Box sx={{
display: "flex", height: `calc(100% - ${headersHeight}px)`, width: "100%", mt: `${headersHeight}px`
}}>
<Box
sx={{
display: "flex",
height: `calc(100% - ${headersHeight}px)`,
width: "100%",
mt: `${headersHeight}px`,
}}
>
<AppBar sx={{ position: "fixed", top: "unset" }} elevation={0} open={open}>
<Toolbar variant="dense" sx={{ minHeight: 40 }}>
<IconButton
@@ -81,7 +86,9 @@ const HeaderWithSidebar = ({ children }) => {
<MenuIcon />
</IconButton>
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
{headerMenu.map(menu => <HeaderMenu key={menu.title} menu={menu} />)}
{headerMenu.map((menu) => (
<HeaderMenu key={menu.title} menu={menu} />
))}
</Box>
</Toolbar>
</AppBar>
@@ -104,7 +111,9 @@ const HeaderWithSidebar = ({ children }) => {
open={open}
>
<DrawerHeader sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Typography variant="subtitle2" color="#757575" sx={{ px: 1 }}>تاریخ امروز: {now}</Typography>
<Typography variant="subtitle2" color="#757575" sx={{ px: 1 }}>
تاریخ امروز: {now}
</Typography>
<IconButton onClick={handleDrawerClose}>
<ChevronRightIcon />
</IconButton>