diff --git a/docs/Layout.md b/docs/Layout.md index 3b3362942bb..5a0e11a8a16 100644 --- a/docs/Layout.md +++ b/docs/Layout.md @@ -51,6 +51,7 @@ const App = () => ( | `className` | Optional | `string` | - | Passed to the root `
` 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 `` props: @@ -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 `` 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) => ; + + +// 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 ( + + {children} + + ); +}; +``` + ## `sx`: CSS API Pass an `sx` prop to customize the style of the main component and the underlying elements.