updated the ui

src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
-import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material';
+import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Tooltip, Typography, useMediaQuery } from '@mui/material';
 
 // project import
 import Dot from 'components/@extended/Dot';
@@ -80,13 +80,23 @@ const NavItem = ({ item, level }) => {
   return (
     <>
       {menuOrientation === MenuOrientation.VERTICAL || downLG ? (
-        <ListItemButton
-          {...listItemProps}
-          disabled={item.disabled}
-          selected={isSelected}
-          onClick={() => {
-            // dispatch(setSelectedMenu(item));
+        <Tooltip
+          title={!drawerOpen && level === 1 ? item.title : ''}
+          placement="right"
+          arrow
+          disableInteractive
+          componentsProps={{
+            tooltip: { sx: { bgcolor: '#0f172a', fontSize: 12, fontWeight: 600, px: 1.25, py: 0.75, borderRadius: 1.5 } },
+            arrow: { sx: { color: '#0f172a' } }
           }}
+        >
+          <ListItemButton
+            {...listItemProps}
+            disabled={item.disabled}
+            selected={isSelected}
+            onClick={() => {
+              // dispatch(setSelectedMenu(item));
+            }}
           sx={{
             zIndex: 1201,
             pl: drawerOpen ? `${level * 28}px` : 1.5,
@@ -168,7 +178,8 @@ const NavItem = ({ item, level }) => {
               avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
             />
           )}
-        </ListItemButton>
+          </ListItemButton>
+        </Tooltip>
       ) : (
         <ListItemButton
           {...listItemProps}