Merge pull request #3390 from m4theushw/sidebar-tooltip

[RFR] Add tooltip to menu entries on the sidebar
marmelab · Jul 7, 2019 · fdc7d19 · fdc7d19
2 parents 2c0cf4d + 0fa6ee5
commit fdc7d19
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 11 deletions.
diff --git a/examples/demo/src/layout/Menu.js b/examples/demo/src/layout/Menu.js
@@ -35,7 +35,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
     return (
         <div>
             {' '}
-            <DashboardMenuItem onClick={onMenuClick} />
+            <DashboardMenuItem onClick={onMenuClick} sidebarIsOpen={open} />
             <SubMenu
                 handleToggle={() => handleToggle('menuSales')}
                 isOpen={state.menuSales}
@@ -50,6 +50,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     })}
                     leftIcon={<orders.icon />}
                     onClick={onMenuClick}
+                    sidebarIsOpen={open}
                 />
                 <MenuItemLink
                     to={`/invoices`}
@@ -58,6 +59,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     })}
                     leftIcon={<invoices.icon />}
                     onClick={onMenuClick}
+                    sidebarIsOpen={open}
                 />
             </SubMenu>
             <SubMenu
@@ -74,6 +76,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     })}
                     leftIcon={<products.icon />}
                     onClick={onMenuClick}
+                    sidebarIsOpen={open}
                 />
                 <MenuItemLink
                     to={`/categories`}
@@ -82,6 +85,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     })}
                     leftIcon={<categories.icon />}
                     onClick={onMenuClick}
+                    sidebarIsOpen={open}
                 />
             </SubMenu>
             <SubMenu
@@ -98,6 +102,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     })}
                     leftIcon={<visitors.icon />}
                     onClick={onMenuClick}
+                    sidebarIsOpen={open}
                 />
                 <MenuItemLink
                     to={`/segments`}
@@ -106,6 +111,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     })}
                     leftIcon={<LabelIcon />}
                     onClick={onMenuClick}
+                    sidebarIsOpen={open}
                 />
             </SubMenu>
             <MenuItemLink
@@ -115,6 +121,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                 })}
                 leftIcon={<reviews.icon />}
                 onClick={onMenuClick}
+                sidebarIsOpen={open}
             />
             <Responsive
                 xsmall={
@@ -123,6 +130,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                         primaryText={translate('pos.configuration')}
                         leftIcon={<SettingsIcon />}
                         onClick={onMenuClick}
+                        sidebarIsOpen={open}
                     />
                 }
                 medium={null}

diff --git a/examples/demo/src/layout/SubMenu.js b/examples/demo/src/layout/SubMenu.js
@@ -6,6 +6,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import Collapse from '@material-ui/core/Collapse';
+import Tooltip from '@material-ui/core/Tooltip';
 import { makeStyles } from '@material-ui/core/styles';
 
 import { useTranslate } from 'react-admin';
@@ -32,16 +33,27 @@ const SubMenu = ({
 }) => {
     const translate = useTranslate();
     const classes = useStyles();
+
+    const header = (
+        <MenuItem dense button onClick={handleToggle}>
+            <ListItemIcon className={classes.icon}>
+                {isOpen ? <ExpandMore /> : icon}
+            </ListItemIcon>
+            <Typography variant="inherit" color="textSecondary">
+                {translate(name)}
+            </Typography>
+        </MenuItem>
+    );
+
     return (
         <Fragment>
-            <MenuItem dense button onClick={handleToggle}>
-                <ListItemIcon className={classes.icon}>
-                    {isOpen ? <ExpandMore /> : icon}
-                </ListItemIcon>
-                <Typography variant="inherit" color="textSecondary">
-                    {translate(name)}
-                </Typography>
-            </MenuItem>
+            {sidebarIsOpen || isOpen ? (
+                header
+            ) : (
+                <Tooltip title={translate(name)} placement="right">
+                    {header}
+                </Tooltip>
+            )}
             <Collapse in={isOpen} timeout="auto" unmountOnExit>
                 <List
                     dense

diff --git a/packages/ra-ui-materialui/src/layout/Menu.js b/packages/ra-ui-materialui/src/layout/Menu.js
@@ -47,7 +47,9 @@ const Menu = ({
     const translate = useTranslate();
     return (
         <div className={classnames(classes.main, className)} {...rest}>
-            {hasDashboard && <DashboardMenuItem onClick={onMenuClick} />}
+            {hasDashboard && (
+                <DashboardMenuItem onClick={onMenuClick} sidebarIsOpen={open} />
+            )}
             {resources
                 .filter(r => r.hasList)
                 .map(resource => (
@@ -63,6 +65,7 @@ const Menu = ({
                         }
                         onClick={onMenuClick}
                         dense={dense}
+                        sidebarIsOpen={open}
                     />
                 ))}
             <Responsive xsmall={logout} medium={null} />

diff --git a/packages/ra-ui-materialui/src/layout/MenuItemLink.js b/packages/ra-ui-materialui/src/layout/MenuItemLink.js
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { NavLink } from 'react-router-dom';
 import MenuItem from '@material-ui/core/MenuItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
+import Tooltip from '@material-ui/core/Tooltip';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 
 const NavLinkRef = React.forwardRef((props, ref) => (
@@ -37,7 +38,7 @@ export class MenuItemLink extends Component {
         this.props.onClick && this.props.onClick(e);
     };
 
-    render() {
+    renderMenuItem() {
         const {
             classes,
             className,
@@ -64,6 +65,20 @@ export class MenuItemLink extends Component {
             </MenuItem>
         );
     }
+
+    render() {
+        const { sidebarIsOpen, primaryText } = this.props;
+
+        if (sidebarIsOpen) {
+            return this.renderMenuItem();
+        }
+
+        return (
+            <Tooltip title={primaryText} placement="right">
+                {this.renderMenuItem()}
+            </Tooltip>
+        );
+    }
 }
 
 export default withStyles(styles)(MenuItemLink);