In the Dandelion Pro React theme, they designed the sidebar to contain the menu items with icon only if the menu item has children. Therefore it is necessary to make a change to display the menu item without children with icon
<pre>
// app/api/ui/menu.js
// add parent menu with linkParent property
{
key: 'home2',
name: 'Home',
icon: 'ios-home-outline',
linkParent: '/home2',
},
</pre>
// app/components/Sidebar/MainMenu.js
// make menu type condition in getMenus constant
if (item.child || item.linkParent) {
return (
<div key={index.toString()}>
<ListItem
component={LinkBtn}
to={item.linkParent ? item.linkParent : '#'}
button
className={
classNames(
classes.head,
item.icon ? classes.iconed : '',
open.indexOf(item.key) > -1 ? classes.opened : '',
)
}
onClick={() => openSubMenu(item.key, item.keyParent)}
>
{item.icon && (
<ListItemIcon className={classes.icon}>
<Ionicon icon={item.icon} />
</ListItemIcon>
)}
<ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
{ !item.linkParent && (
<span>
{ open.indexOf(item.key) > -1 ? <ExpandLess /> : <ExpandMore /> }
</span>
)}
</ListItem>
{ !item.linkParent && (
<Collapse
component="div"
className={classNames(
classes.nolist,
(item.keyParent ? classes.child : ''),
)}
in={open.indexOf(item.key) > -1}
timeout="auto"
unmountOnExit
>
<List className={classes.dense} component="nav" dense>
{ getMenus(item.child, 'key') }
</List>
</Collapse>
)}
</div>
);
}
<br />