I’m new to the React, my objective is to show color when I click on one of the Menu Item in Sidebar. Can anyone assist me in how to change color while clicking the menu item?
How to change the menu item’s color of sidebar when we click on it with Material-UI in React?
I referenced the post but it didn’t solve my problem.
https://i.stack.imgur.com/gInE5.png
Here is the Code:
import React from "react";
import { Collapse, List, ListItem } from "@material-ui/core";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ExpandLessIcon from "@material-ui/icons/ExpandLess";
import { useNavigate } from "react-router-dom";
const SidebarItem = ({ item }) => {
const [collapsed, setCollapsed] = React.useState(true);
const { title, enable, path, items } = item;
let navigate = useNavigate();
const toggleCollapse = () => {
setCollapsed(prevValue => !prevValue);
}
const onClick = () => {
if (Array.isArray(items)) {
console.log(items);
toggleCollapse();
} else if (enable === true) {
console.log(path);
if (item[0]) {
return navigate('');
} else {
return navigate("/setup/"+path);
}
}
}
let expandIcon;
if (Array.isArray(items) && items.length) {
expandIcon = !collapsed ? <ExpandLessIcon /> : <ExpandMoreIcon />;
}
return (
<>
<ListItem onClick={onClick} button dense>
<div>{title}</div>
{expandIcon}
</ListItem>
<Collapse in={!collapsed} timeout="auto" unmountOnExit>
{Array.isArray(items) ? (
<List>
{items && items.map((subItem, index) => (
<SidebarItem
key={`${subItem}${index}`}
item={subItem}/>
))}
</List>
) : null}
</Collapse>
</>
);
}
const Sidebar = ({ items }) => {
return (
<>
<List>
{items && items.map((sidebarItem, index) => (
<SidebarItem
key={`${sidebarItem}${index}`}
item={sidebarItem}/>
))}
</List>
</>
);
}
export default Sidebar;