How to configure the main sidebar menu in a React-Admin app

Woodchuck 0
Viewed 45

My app uses React-Admin version 2.9 and I'm trying to determine how to customize the app's main sidebar menu.

When I add Resource items to the app's Admin component, they appear in the sidebar, but in a seemingly partially random order. Some are in the same order as they are in my Admin component, others are not. Is there some way to specify the ordering of these items?

It's also a bit mysterious to me how to specify which Resource items even appear on that main sidebar menu. I eventually figured out that resources only appear on the sidebar if I give them an options.label attribute. Is that the intended mechanism for specifying that a Resource should appear in the sidebar? Or is there some other, perhaps more intuitive, way to mark a Resource as one to appear in the sidebar? The documentation simply states "options.label allows to customize the display name of a given resource in the menu."

react-admin reactjs
1 Answers

Resources appear in the sidebar if you provide them a list component, e.g.

<Resource name="posts" list={PostList} />

Has a menu entry, but

<Resource name="posts"  />

does not. This is because there would be nothing to lead to.

The order in the menu is the order of the children in the <Admin> component. If it is not in your case, it may be because you have dynamic resources (i.e. you add some Resources after the first render). In that case, you should build a Menu by hand, as explained in the documentation:

// in src/MyMenu.js
import React from 'react';
import { connect } from 'react-redux';
import { MenuItemLink, getResources, Responsive } from 'react-admin';
import { withRouter } from 'react-router-dom';

const MyMenu = ({ resources, onMenuClick, logout }) => (
    <div>
        {resources.map(resource => (
            <MenuItemLink
                key={resource.name}
                to={`/${resource.name}`}
                primaryText={resource.options && resource.options.label || resource.name}
                leftIcon={createElement(resource.icon)}
                onClick={onMenuClick}
            />
        ))}
        <MenuItemLink to="/custom-route" primaryText="Miscellaneous" onClick={onMenuClick} />
        <Responsive
            small={logout}
            medium={null} // Pass null to render nothing on larger devices
        />
    </div>
);

const mapStateToProps = state => ({
    resources: getResources(state),
});

export default withRouter(connect(mapStateToProps)(MyMenu));

More details at https://marmelab.com/react-admin/doc/2.9/Theming.html#using-a-custom-menu

Note: react-admin 2.9 is not maintained since 3 years, I strongly advise you to upgrade to version 4.

François Zaninotto0
Related