From 6d8d75057211c70aaec591cfa06885110eddf70d Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Wed, 29 Mar 2023 16:26:06 +0800 Subject: [PATCH 1/3] add missing prop of layout --- docs/Layout.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/Layout.md b/docs/Layout.md index 3b3362942bb..96d04a3a24e 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 that wraps the menu in a drawer | | `sx` | Optional | `SxProps` | - | Style overrides, powered by MUI System | React-admin injects more props at runtime based on the `` props: From 6672b5974d6b7ae3ef0148c0fa61f4b2f2e45f44 Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Thu, 30 Mar 2023 13:19:31 +0800 Subject: [PATCH 2/3] Update docs/Layout.md Co-authored-by: Jean-Baptiste Kaiser --- docs/Layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Layout.md b/docs/Layout.md index 96d04a3a24e..9af000d3545 100644 --- a/docs/Layout.md +++ b/docs/Layout.md @@ -51,7 +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 that wraps the menu in a drawer | +| `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: From 31077834c5e811441873292367a3b1691e5183a6 Mon Sep 17 00:00:00 2001 From: smeng9 <38666763+smeng9@users.noreply.github.com> Date: Thu, 30 Mar 2023 13:52:34 +0800 Subject: [PATCH 3/3] add example for sidebar prop --- docs/Layout.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/docs/Layout.md b/docs/Layout.md index 9af000d3545..5a0e11a8a16 100644 --- a/docs/Layout.md +++ b/docs/Layout.md @@ -234,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.