Merge pull request #2391 from marmelab/custom-user-menu-icon

[RFR] Custom User Menu icon
marmelab · Oct 11, 2018 · 8a74215 · 8a74215
2 parents 1b8dc1f + 86f6187
commit 8a74215
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/docs/Theming.md b/docs/Theming.md
@@ -386,9 +386,11 @@ const MyLayout = props => <Layout
 export default MyLayout;
 ```
 
+### UserMenu Customization
+
 You can replace the default user menu by your own by setting the `userMenu` prop of the `<AppBar>` component. For instance, to add custom menu items, just decorate the default `<UserMenu>` by adding children to it:
 
-```js
+```jsx
 import { AppBar, UserMenu, MenuItemLink } from 'react-admin';
 import SettingsIcon from '@material-ui/icons/Settings';
 
@@ -407,6 +409,38 @@ const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} />;
 const MyLayout = props => <Layout {...props} appBar={MyAppBar} />;
 ```
 
+You can also customize the default icon by setting the `icon` prop to the `<UserMenu />` component.
+
+{% raw %}
+``` jsx
+import { AppBar, UserMenu } from 'react-admin';
+import { withStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+const myCustomIconStyle = {
+    avatar: {
+        height: 30,
+        width: 30,
+    },
+};
+
+const MyCustomIcon = withStyles(myCustomIconStyle)(
+    ({ classes }) => (
+        <Avatar
+            className={classes.avatar}
+            src="https://marmelab.com/images/avatars/adrien.jpg"
+        />
+    )
+);
+
+const MyUserMenu = props => (<UserMenu {...props} icon={<MyCustomIcon />} />);
+
+const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} />;
+```
+{% endraw %}
+
+### Sidebar Customization
+
 You can specify the `Sidebar` size by setting the `size` property:
 
 ```jsx
@@ -420,6 +454,8 @@ const MyLayout = props => <Layout
 
 ```
 
+### Layout From Scratch
+
 For more custom layouts, write a component from scratch. It must contain a `{children}` placeholder, where react-admin will render the resources. Use the [default layout](https://github.com/marmelab/react-admin/blob/master/src/mui/layout/Layout.js) as a starting point. Here is a simplified version (with no responsive support):
 
 ```jsx

diff --git a/packages/ra-ui-materialui/src/layout/UserMenu.js b/packages/ra-ui-materialui/src/layout/UserMenu.js
@@ -11,11 +11,13 @@ class UserMenu extends React.Component {
         children: PropTypes.node,
         label: PropTypes.string.isRequired,
         logout: PropTypes.node,
+        icon: PropTypes.node,
         translate: PropTypes.func.isRequired,
     };
 
     static defaultProps = {
         label: 'ra.auth.user_menu',
+        icon: <AccountCircle />,
     };
 
     state = {
@@ -36,7 +38,7 @@ class UserMenu extends React.Component {
     };
 
     render() {
-        const { children, label, logout, translate } = this.props;
+        const { children, label, icon, logout, translate } = this.props;
         if (!logout && !children) return null;
         const { anchorEl } = this.state;
         const open = Boolean(anchorEl);
@@ -47,11 +49,11 @@ class UserMenu extends React.Component {
                     <IconButton
                         arial-label={label && translate(label, { _: label })}
                         aria-owns={open ? 'menu-appbar' : null}
-                        aria-haspopup="true"
-                        onClick={this.handleMenu}
+                        aria-haspopup={true}
                         color="inherit"
+                        onClick={this.handleMenu}
                     >
-                        <AccountCircle />
+                        {icon}
                     </IconButton>
                 </Tooltip>
                 <Menu