CODEWITHSUNDEEP
reactjsadmin-on-rest
4knort
4knort

Reputation: 67

admin on rest hide resource component in sidebar

I need a resource with all its configuration, but I don't want it to be showed in sidebar enter image description here

Upvotes: 1

Views: 5885

Answers (4)

ezennnn
ezennnn

Reputation: 1427

If your goal is to hide the entire sidebar, and make it not visible to the user, in your theme.js

try add the following code:

RaSidebar: {
  drawerPaper: {
    display: 'none',
  },
},

eg.

const baseTheme = createTheme({
  overrides: {
    ...<components you want override etc>...,
    // React-admin
    RaSidebar: {
      drawerPaper: {
        display: 'none',
      },
    },
  },
});

Upvotes: 0

Daniel Jakobsen Hallel
Daniel Jakobsen Hallel

Reputation: 584

I found a different "hacky" way You can add in your css the following to hide from the menu the resource

.MuiDrawer-root a[href^='#/resource-to-exclude'] {
    display: none;
}

Upvotes: 4

TextMode
TextMode

Reputation: 91

You can omit the list prop for a Resource if you want to hide it in the sidebar menu.

<Resource name="posts" />

Upvotes: 8

Gildas Garcia
Gildas Garcia

Reputation: 7066

As explained in the documentation, you can provide your Menu component to the Admin component using it's menu prop. See https://marmelab.com/react-admin/Admin.html#menu

Please note that this prop will be deprecated soon in favor of appLayout but you'll still use this custom menu in your custom layout anyway.

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

const Menu = ({ resources, onMenuClick, logout }) => (
    <div>
        {resources
            .filter(resource => resource.name !== 'excluded-resource')
            .map(resource => (
                <MenuItemLink to={`/${resource.name}`} primaryText={resource.name} onClick={onMenuClick} />
            ))
        }
        <Responsive
            small={logout}
            medium={null} // Pass null to render nothing on larger devices
        />
    </div>
);

const mapStateToProps = state => ({
    // Rerieve all known resources
    resources: getResources(state),
});

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

Upvotes: 2

Related Questions