JNG-5410 title for nav items

BlackBeltTechnology · Jan 11, 2024 · eabd4ab · eabd4ab
1 parent 4c7878d
commit eabd4ab
Showing 1 changed file with 43 additions and 40 deletions.
diff --git a/...react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavItem.tsx.hbs b/...react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavItem.tsx.hbs
@@ -9,6 +9,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
+import Tooltip from "@mui/material/Tooltip";
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useConfig } from '~/hooks';
 import { MenuOrientation, ThemeMode } from '~/config';
@@ -74,46 +75,48 @@ export const NavItem = ({ item, level }: NavItemProps) => {
   return (
     <>
       {menuOrientation === MenuOrientation.VERTICAL || downLG ? (
-        <ListItemButton
-          component={LinkComponent}
-          disabled={item.disabled}
-          sx={ {
-            zIndex: 1201,
-            pl: !miniDrawer ? `${level * iconWidth}px` : borderRadius,
-            py: miniDrawer && level === 1 ? 1.25 : 1,
-            '&:hover': {
-              bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter',
-            },
-          } }
-          {...(downLG && {
-            onClick: () => onChangeMiniDrawer(true),
-          })}
-        >
-          {item.icon && (
-            <ListItemIcon
-              sx={ {
-                minWidth: iconWidth,
-                color: textColor,
-                ...(miniDrawer && {
-                  width: iconSize,
-                  height: iconSize,
-                  ...iconPropsVertical,
-                }),
-              } }
-            >
-              <MdiIcon path={item.icon!} sx={ { fontSize: !miniDrawer ? '1rem' : '1.25rem' } } />
-            </ListItemIcon>
-          )}
-          {(!miniDrawer || (miniDrawer && level !== 1)) && (
-            <ListItemText
-              primary={
-                <Typography variant="h6" sx={ { color: textColor } }>
-                  {t(`menuTree.${item.title}`, { defaultValue: item.title })}
-                </Typography>
-              }
-            />
-          )}
-        </ListItemButton>
+        <Tooltip title={miniDrawer && level !== undefined && level <= 1 ? (item.title as string) : undefined} placement="right">
+          <ListItemButton
+            component={LinkComponent}
+            disabled={item.disabled}
+            sx={ {
+              zIndex: 1201,
+              pl: !miniDrawer ? `${level * iconWidth}px` : borderRadius,
+              py: miniDrawer && level === 1 ? 1.25 : 1,
+              '&:hover': {
+                bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter',
+              },
+            } }
+            {...(downLG && {
+              onClick: () => onChangeMiniDrawer(true),
+            })}
+          >
+            {item.icon && (
+              <ListItemIcon
+                sx={ {
+                  minWidth: iconWidth,
+                  color: textColor,
+                  ...(miniDrawer && {
+                    width: iconSize,
+                    height: iconSize,
+                    ...iconPropsVertical,
+                  }),
+                } }
+              >
+                <MdiIcon path={item.icon!} sx={ { fontSize: !miniDrawer ? '1rem' : '1.25rem' } } />
+              </ListItemIcon>
+            )}
+            {(!miniDrawer || (miniDrawer && level !== 1)) && (
+              <ListItemText
+                primary={
+                  <Typography variant="h6" sx={ { color: textColor } }>
+                    {t(`menuTree.${item.title}`, { defaultValue: item.title })}
+                  </Typography>
+                }
+              />
+            )}
+          </ListItemButton>
+        </Tooltip>
       ) : (
         <ListItemButton
           component={LinkComponent}