Badget icon

next.config.js

@@ -6,7 +6,7 @@ const nextConfig = {
         defaultLocale: 'fa',
         locales: ['fa'],
         localeDetection: false,
-    },
+    }
 }
 
 module.exports = nextConfig

public/manifest.json

@@ -7,8 +7,8 @@
   "start_url": "/dashboard",
   "orientation": "portrait",
   "display": "standalone",
-  "theme_color": "#5B36DB",
+  "theme_color": "#084070",
-  "background_color": "#5B36DB",
+  "background_color": "#084070",
   "icons": [
     {
       "src": "/icons/maskable_icon.png",

src/layouts/dashboardLayouts/sidebar/SidebarListItem.jsx

@@ -1,7 +1,7 @@
 import {NextLinkComposed} from "@/core/components/LinkRouting";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
-import {Badge, Box, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography,} from "@mui/material";
+import {Badge, IconButton, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography,} from "@mui/material";
 import {useTranslations} from "next-intl";
 import {Fragment} from "react";
 import SidebarListSubItem from "./SidebarListSubItem";
@@ -11,7 +11,19 @@ const SidebarListItem = ({item, dispatch, handleDrawerToggle}) => {
 
     return (
         <Fragment key={item.key}>
-            <ListItem disablePadding sx={{display: "block"}}>
+            <ListItem disablePadding secondaryAction={
+                <IconButton>
+                    <Badge
+                        badgeContent="56"
+                        color="error"
+                        variant="standard"
+                        anchorOrigin={{
+                            vertical: "top",
+                            horizontal: "right",
+                        }}
+                    />
+                </IconButton>
+            }>
                 <ListItemButton
                     selected={item.selected}
                     {...(item.type == "page" && {
@@ -29,6 +41,7 @@ const SidebarListItem = ({item, dispatch, handleDrawerToggle}) => {
                     sx={{
                         minHeight: 48,
                     }}
+
                 >
                     <ListItemIcon
                         sx={{
@@ -51,19 +64,9 @@ const SidebarListItem = ({item, dispatch, handleDrawerToggle}) => {
                         }
                     />
 
+
                     {item.type == "menu" &&
                         (item.showSubItem ? <ExpandLess/> : <ExpandMore/>)}
-                    <Box sx={{paddingRight: 2}}>
-                        <Badge
-                            badgeContent="21"
-                            color="error"
-                            variant="standard"
-                            anchorOrigin={{
-                                vertical: "top",
-                                horizontal: "right",
-                            }}
-                        />
-                    </Box>
                 </ListItemButton>
             </ListItem>
             {item.subItem && (