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

add badge for sidebar

Browse Source
This commit is contained in:
Amirhossein Mahmoodi
2024-08-27 13:00:17 +03:30
parent 1bd0f7f606
commit cb2248e108
7 changed files with 80 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/layouts/dashboard/headerWithSidebar/Sidebar/SidebarBadge.jsx Normal file
View File

@@ -0,0 +1,22 @@
import { getValueByPath } from "@/core/utils/getValueByPath";
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()
useEffect(() => {
setValue(getValueByPath(data, badge))
}, [data, badge])
if (!data) return null
if (!value) return null
return (
<Chip label={(value).toLocaleString("fa-IR")} size="small" {...chipProps} />
)
}
export default SidebarBadge

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

@@ -1,6 +1,7 @@
import { ExpandLess, ExpandMore } from "@mui/icons-material";
import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material";
import Link from "next/link";
import SidebarBadge from "./SidebarBadge";
import SidebarSubitems from "./SidebarSubitems";
const SidebarListItems = ({ menuItem, dispatch }) => {
@@ -29,6 +30,11 @@ const SidebarListItems = ({ menuItem, dispatch }) => {
{menuItem.icon}
</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>
)}
{menuItem.hasSubitems ? menuItem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
</ListItemButton>
</ListItem>

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

@@ -1,6 +1,7 @@
import { ExpandLess, ExpandMore } from "@mui/icons-material";
import { Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Stack } from "@mui/material";
import Link from "next/link";
import SidebarBadge from "./SidebarBadge";
const SidebarSubitems = ({ subitem, dispatch }) => {
return (
@@ -27,7 +28,12 @@ const SidebarSubitems = ({ subitem, dispatch }) => {
{subitem.icon}
</ListItemIcon>
<ListItemText primary={subitem.label} />
{subitem.hasSubitems ? subitem.showSubitems ? <ExpandLess /> : <ExpandMore /> : null}
{subitem.badges && (
<Stack direction={'row'} sx={{ px: .5 }} spacing={.5}>
{subitem.badges.map((badge, i) => <SidebarBadge key={i} badge={badge} />)}
</Stack>
)}
{subitem.hasSubitems ? subitem.showSubitems ? <ExpandLess /> : <ExpandMore /> : <Box sx={{ width: 29 }} />}
</ListItemButton>
</ListItem>
<Collapse in={subitem.showSubitems} timeout="auto" mountOnEnter={true} unmountOnExit={true}>