From fa80948ab21b7c2a11e0455fc0b1bb244a3ef9d6 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Mon, 23 Nov 2020 16:51:36 +0100
Subject: [PATCH] Move control of sidebar width to its menu child

---
 packages/ra-ui-materialui/src/layout/Menu.tsx | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/ra-ui-materialui/src/layout/Menu.tsx b/packages/ra-ui-materialui/src/layout/Menu.tsx
index 9b3a2ae1d06..5f8a1112d23 100644
--- a/packages/ra-ui-materialui/src/layout/Menu.tsx
+++ b/packages/ra-ui-materialui/src/layout/Menu.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { FC, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { shallowEqual, useSelector } from 'react-redux';
+import lodashGet from 'lodash/get';
 // @ts-ignore
 import inflection from 'inflection';
 import { useMediaQuery, Theme } from '@material-ui/core';
@@ -13,6 +14,9 @@ import { getResources, useTranslate, Translate, ReduxState } from 'ra-core';
 import DashboardMenuItem from './DashboardMenuItem';
 import MenuItemLink from './MenuItemLink';
 
+export const MENU_WIDTH = 240;
+export const CLOSED_MENU_WIDTH = 55;
+
 const useStyles = makeStyles(
     theme => ({
         main: {
@@ -27,6 +31,12 @@ const useStyles = makeStyles(
                 marginTop: '1.5em',
             },
         },
+        open: {
+            width: lodashGet(theme, 'menu.width', MENU_WIDTH),
+        },
+        closed: {
+            width: lodashGet(theme, 'menu.closedWidth', CLOSED_MENU_WIDTH),
+        },
     }),
     { name: 'RaMenu' }
 );
@@ -65,7 +75,17 @@ const Menu: FC<MenuProps> = props => {
     useSelector((state: ReduxState) => state.router.location.pathname);
 
     return (
-        <div className={classnames(classes.main, className)} {...rest}>
+        <div
+            className={classnames(
+                classes.main,
+                {
+                    [classes.open]: open,
+                    [classes.closed]: !open,
+                },
+                className
+            )}
+            {...rest}
+        >
             {hasDashboard && (
                 <DashboardMenuItem
                     onClick={onMenuClick}