Улучшил интерфейс, добавиви выделение и пойнтер для бокового меню

src/Components/Layout/SidebarMenuComponents/MenuItem.jsx

@@ -30,13 +30,51 @@ const MenuItem = ({ item, onSelectItem }) => {
 
     return (
         <>
-            <ListItem component="div" onClick={handleToggle}>
+            <ListItem 
+                component="div" 
+                onClick={hasChildren ? handleToggle : handleOpenTab}
+                sx={{
+                    cursor: "pointer", // Курсор pointer везде
+                    "&:hover": {
+                        backgroundColor: "#f5f5f5", // Подсветка при наведении на весь элемент
+                    },
+                }}
+            >
                 <ListItemIcon>
-                    <div onClick={handleOpenTab} style={{ cursor: "pointer" }}>
+                    {hasChildren ? (
-                        {hasChildren ? (isOpen ? <FolderOpen /> : <Folder />) : <Folder />}
+                        <div 
-                    </div>
+                            onClick={handleOpenTab} 
+                            style={{ 
+                                cursor: "pointer",
+                                borderRadius: "4px", // Скругление углов
+                                padding: "4px", // Отступы для увеличения области hover
+                                "&:hover": {
+                                    backgroundColor: "#e0e0e0", // Подсветка при наведении на иконку
+                                },
+                            }}
+                        >
+                            {isOpen ? <FolderOpen /> : <Folder />}
+                        </div>
+                    ) : (
+                        <div 
+                            onClick={handleOpenTab} 
+                            style={{ 
+                                cursor: "pointer",
+                                borderRadius: "4px", // Скругление углов
+                                padding: "4px", // Отступы для увеличения области hover
+                                "&:hover": {
+                                    backgroundColor: "#e0e0e0", // Подсветка при наведении на иконку
+                                },
+                            }}
+                        >
+                            {/* Здесь можно добавить другую иконку или оставить пустым */}
+                        </div>
+                    )}
                 </ListItemIcon>
-                <ListItemText primary={item.title} />
+                <ListItemText 
+                    primary={item.title} 
+                    sx={{ cursor: "pointer" }} // Курсор pointer для текста
+                />
                 {hasChildren && (isOpen ? <ExpandLess /> : <ExpandMore />)}
             </ListItem>
             {hasChildren && (