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 />

Post Suggeriti