Dr. Domenico Giacomo Campanile

Sviluppatore App Web e Mobile

Menu item icon without children in Dandelion Pro – React

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 />
Open chat
Hai bisogno di assistenza?!
Ciao! sono il Dr. Domenico Giacomo Campanile esperto nello sviluppo di applicativi Web e Mobile.
Vuoi creare un App o un sito Web per la tua attività?! ti seguiremo a 360°! Progettazione, Sviluppo, Grafica e Pubblicizzazione sul Web!