[RFR] Use theme to store sidebar width

UPGRADE.md

@@ -187,3 +187,26 @@ If you had custom exporter on `List` components, here's how to migrate:
 +    downloadCSV(csv, 'posts');
 +});
 ```
+
+## Customizing the SideBar size is done through theme
+
+The `<SideBar>` component used to accept `size` and `closedSize` prop to control its width.
+
+You can now customize those values by providing a custom material-ui theme.
+
+```jsx
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuiTheme({
+    sidebar: {
+        width: 300, // The default value is 240
+        closedWidth: 70, // The default value is 55
+    },
+});
+
+const App = () => (
+    <Admin theme={theme} dataProvider={simpleRestProvider('http://path.to.my.api')}>
+        // ...
+    </Admin>
+);
+```

docs/Theming.md

@@ -324,7 +324,7 @@ const myTheme = createMuiTheme({
 });
 ```
 
-The `muiTheme` object contains the following keys:
+The `myTheme` object contains the following keys:
 
 * `breakpoints`
 * `direction`
@@ -337,7 +337,7 @@ The `muiTheme` object contains the following keys:
 * `transitions`
 * `spacing`
 * `zIndex`
-
+* 
 **Tip**: Check [Material UI default theme documentation](https://material-ui.com/customization/default-theme/) to see the default values and meaning for these keys.
 
 Once your theme is defined, pass it to the `<Admin>` component, in the `theme` prop.
@@ -441,17 +441,23 @@ const MyAppBar = props => <AppBar {...props} userMenu={MyUserMenu} />;
 
 ### Sidebar Customization
 
-You can specify the `Sidebar` size by setting the `size` property:
+You can specify the `Sidebar` width by setting the `width` and `closedWidth` property on your custom material-ui them:
 
 ```jsx
-import { Sidebar } from 'react-admin';
+import { createMuiTheme } from '@material-ui/core/styles';
 
-const MySidebar = props => <Sidebar {...props} size={200} />;
-const MyLayout = props => <Layout
-    {...props}
-    sidebar={MySidebar}
-/>;
+const theme = createMuiTheme({
+    sidebar: {
+        width: 300, // The default value is 240
+        closedWidth: 70, // The default value is 55
+    },
+});
 
+const App = () => (
+    <Admin theme={theme} dataProvider={simpleRestProvider('http://path.to.my.api')}>
+        // ...
+    </Admin>
+);
 ```
 
 ### Layout From Scratch

packages/ra-ui-materialui/src/defaultTheme.ts

@@ -12,4 +12,8 @@ export default {
             fontWeight: 400,
         },
     },
+    sidebar: {
+        width: 240,
+        closedWidth: 55,
+    },
 };

packages/ra-ui-materialui/src/layout/Sidebar.js

@@ -6,7 +6,7 @@ import Drawer from '@material-ui/core/Drawer';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import withWidth from '@material-ui/core/withWidth';
 import { setSidebarVisibility } from 'ra-core';
-
+import lodashGet from 'lodash/get';
 import Responsive from './Responsive';
 
 export const DRAWER_WIDTH = 240;
@@ -18,6 +18,9 @@ const styles = theme =>
             position: 'relative',
             height: 'auto',
             overflowX: 'hidden',
+            width: props => props.open
+                ? lodashGet(theme, 'sidebar.width', DRAWER_WIDTH)
+                : lodashGet(theme, 'sidebar.closedWidth', CLOSED_DRAWER_WIDTH),
             transition: theme.transitions.create('width', {
                 easing: theme.transitions.easing.sharp,
                 duration: theme.transitions.duration.leavingScreen,
@@ -56,10 +59,8 @@ class Sidebar extends PureComponent {
         const {
             children,
             classes,
-            closedSize,
             open,
             setSidebarVisibility,
-            size,
             width,
             ...rest
         } = this.props;
@@ -72,7 +73,6 @@ class Sidebar extends PureComponent {
                         open={open}
                         PaperProps={{
                             className: classes.drawerPaper,
-                            style: { width: size },
                         }}
                         onClose={this.toggleSidebar}
                         {...rest}
@@ -88,9 +88,6 @@ class Sidebar extends PureComponent {
                         open={open}
                         PaperProps={{
                             className: classes.drawerPaper,
-                            style: {
-                                width: open ? size : closedSize,
-                            },
                         }}
                         onClose={this.toggleSidebar}
                         {...rest}
@@ -107,9 +104,6 @@ class Sidebar extends PureComponent {
                         open={open}
                         PaperProps={{
                             className: classes.drawerPaper,
-                            style: {
-                                width: open ? size : closedSize,
-                            },
                         }}
                         onClose={this.toggleSidebar}
                         {...rest}
@@ -125,18 +119,11 @@ class Sidebar extends PureComponent {
 Sidebar.propTypes = {
     children: PropTypes.node.isRequired,
     classes: PropTypes.object,
-    closedSize: PropTypes.number,
     open: PropTypes.bool.isRequired,
     setSidebarVisibility: PropTypes.func.isRequired,
-    size: PropTypes.number,
     width: PropTypes.string,
 };
 
-Sidebar.defaultProps = {
-    size: DRAWER_WIDTH,
-    closedSize: CLOSED_DRAWER_WIDTH,
-};
-
 const mapStateToProps = state => ({
     open: state.admin.ui.sidebarOpen,
     locale: state.locale, // force redraw on locale change