Merge pull request #5575 from marmelab/sidebar-menu-width-control

Move control of sidebar width to its menu child
marmelab · Nov 23, 2020 · 6caea4b · 6caea4b
2 parents 8d5eb0a + fa80948
commit 6caea4b
Showing 1 changed file with 21 additions and 1 deletion.
diff --git 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}