Nested menu (sub-menu)

Question

I\'m trying to implement Sub-menu (nested menu).

It\'s worth to mention that I\'m using hydra component and don\'t have previous experience with redux (started learn

Answer 1

The react-admin demo now shows a way to do so in examples/demo/src/layout/Menu.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import compose from 'recompose/compose';
import SettingsIcon from '@material-ui/icons/Settings';
import LabelIcon from '@material-ui/icons/Label';
import { withRouter } from 'react-router-dom';
import {
    translate,
    DashboardMenuItem,
    MenuItemLink,
    Responsive,
} from 'react-admin';

import visitors from '../visitors';
import orders from '../orders';
import invoices from '../invoices';
import products from '../products';
import categories from '../categories';
import reviews from '../reviews';
import SubMenu from './SubMenu';

class Menu extends Component {
    state = {
        menuCatalog: false,
        menuSales: false,
        menuCustomers: false,
    };

    static propTypes = {
        onMenuClick: PropTypes.func,
        logout: PropTypes.object,
    };

    handleToggle = menu => {
        this.setState(state => ({ [menu]: !state[menu] }));
    };

    render() {
        const { onMenuClick, open, logout, translate } = this.props;
        return (
            

                {' '}
                
                 this.handleToggle('menuSales')}
                    isOpen={this.state.menuSales}
                    sidebarIsOpen={open}
                    name="pos.menu.sales"
                    icon={}
                >
                    }
                        onClick={onMenuClick}
                    />
                    }
                        onClick={onMenuClick}
                    />
                
                 this.handleToggle('menuCatalog')}
                    isOpen={this.state.menuCatalog}
                    sidebarIsOpen={open}
                    name="pos.menu.catalog"
                    icon={}
                >
                    }
                        onClick={onMenuClick}
                    />
                    }
                        onClick={onMenuClick}
                    />
                
                 this.handleToggle('menuCustomer')}
                    isOpen={this.state.menuCustomer}
                    sidebarIsOpen={open}
                    name="pos.menu.customers"
                    icon={}
                >
                    }
                        onClick={onMenuClick}
                    />
                    }
                        onClick={onMenuClick}
                    />
                
                }
                    onClick={onMenuClick}
                />
                }
                            onClick={onMenuClick}
                        />
                    }
                    medium={null}
                />
                
            
        );
    }
}

const mapStateToProps = state => ({
    open: state.admin.ui.sidebarOpen,
    theme: state.theme,
    locale: state.i18n.locale,
});

const enhance = compose(
    withRouter,
    connect(
        mapStateToProps,
        {}
    ),
    translate
);

export default enhance(Menu);