prettier menu items

interface/src/CustomTheme.tsx

@@ -33,6 +33,18 @@ const theme = responsiveFontSizes(
       text: {
         disabled: '#eee' // white
       }
+    },
+    components: {
+      MuiListItemText: {
+        styleOverrides: {
+          primary: {
+            fontSize: 14
+          },
+          secondary: {
+            color: '#9e9e9e' // grey[500]
+          }
+        }
+      }
     }
   })
 );

interface/src/components/layout/LayoutMenu.tsx

@@ -73,19 +73,6 @@ const LayoutMenu = () => {
           >
             <ListItemText
               primary={LL.MODULES()}
-              // secondary={
-              //   LL.CUSTOMIZATIONS() +
-              //   ', ' +
-              //   LL.SCHEDULER() +
-              //   ', ' +
-              //   LL.CUSTOM_ENTITIES(0) +
-              //   '...'
-              // }
-              // secondaryTypographyProps={{
-              //   noWrap: true,
-              //   fontSize: 12,
-              //   color: menuOpen ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)'
-              // }}
               sx={{ my: 0 }}
               slotProps={{
                 primary: {

interface/src/components/layout/LayoutMenuItem.tsx

@@ -28,11 +28,47 @@ const LayoutMenuItem = ({
       to={to}
       disabled={disabled || false}
       selected={selected}
+      sx={{
+        transition: 'all 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+        transform: selected ? 'scale(1.02)' : 'scale(1)',
+        backgroundColor: selected ? 'rgba(144, 202, 249, 0.1)' : 'transparent',
+        borderRadius: '8px',
+        margin: '2px 8px',
+        '&:hover': {
+          backgroundColor: 'rgba(68, 82, 211, 0.39)',
+          transform: selected ? 'scale(1.02)' : 'scale(1.01)'
+        },
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: selected ? '4px' : '0px',
+          backgroundColor: '#90caf9',
+          borderRadius: '0 2px 2px 0',
+          transition: 'width 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)'
+        }
+      }}
+    >
+      <ListItemIcon
+        sx={{
+          color: selected ? '#90caf9' : '#9e9e9e',
+          transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+          transform: selected ? 'scale(1.1)' : 'scale(1)',
+          transitionProperty: 'color, transform'
+        }}
       >
-      <ListItemIcon sx={{ color: selected ? '#90caf9' : '#9e9e9e' }}>
         <Icon />
       </ListItemIcon>
-      <ListItemText sx={{ color: selected ? '#90caf9' : '#f5f5f5' }}>
+      <ListItemText
+        sx={{
+          color: selected ? '#90caf9' : '#f5f5f5',
+          transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+          fontWeight: selected ? '600' : '400',
+          transitionProperty: 'color, font-weight'
+        }}
+      >
         {label}
       </ListItemText>
     </ListItemButton>