Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] add missing prop of layout #8777

Merged
merged 3 commits into from
Mar 31, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions docs/Layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const App = () => (
| `className` | Optional | `string` | - | Passed to the root `<div>` component |
| `error` | Optional | `Component` | - | A React component rendered in the content area in case of error |
| `menu` | Optional | `Component` | - | A React component rendered at the side of the screen |
| `sidebar` | Optional | `Component` | - | A React component responsible for rendering the menu (e.g. in a drawer) |
| `sx` | Optional | `SxProps` | - | Style overrides, powered by MUI System |

React-admin injects more props at runtime based on the `<Admin>` props:
Expand Down Expand Up @@ -233,6 +234,46 @@ React-admin provides alternative menu layouts that you can use as a base for you

And you can build a totally custom menu using [MUI's `<Menu>` component](https://mui.com/material-ui/react-menu/).

## `sidebar`

You can override the default sidebar using this prop. The default sidebar will display a permanent drawer when the window size is above MUI theme's `sm` breakpoint, and a temporary drawer when the window size is less than that.

If you wish to always display a temporary drawer, you can customize using the following sample code:

```jsx
// in src/Layout.js
import * as React from 'react';
import { Layout } from 'react-admin';

import { MySidebar } from './MySidebar';

export const Layout = (props) => <Layout {...props} sidebar={MySidebar} />;


// in src/MySidebar.js
import * as React from 'react';
import { Drawer } from '@mui/material';
import { SidebarClasses, useLocale, useSidebarState } from 'react-admin';

export const MySidebar = ({ children }) => {
const [open, setOpen] = useSidebarState();
useLocale(); // force redraw on locale change

const toggleSidebar = () => setOpen(!open);

return (
<Drawer
variant="temporary"
open={open}
onClose={toggleSidebar}
classes={SidebarClasses}
>
{children}
</Drawer>
);
};
```

## `sx`: CSS API

Pass an `sx` prop to customize the style of the main component and the underlying elements.
Expand Down