Merge branch 'deni-dev(pc)' into 'master'

tooltipMenu

See merge request !240

src/container/Home.js

@@ -18,6 +18,7 @@ import Collapse from '@material-ui/core/Collapse';
 import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import localeID from 'date-fns/locale/en-US';
+import ReactTooltip from 'react-tooltip';
 
 import {
   BrowserRouter as Router,
@@ -511,20 +512,26 @@ export default function MiniDrawer() {
           {application.map((item, index) => (
             <div style={{ marginTop: index === 0 ? null : 5 }} >
               {item.subItem.length !== 0 ?
+                <a data-tip={item.label} data-for={item.label}>
                   <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 5, paddingRight: 10, cursor: 'pointer' }} onClick={() => { handleCollapse(item) }}>
                     <ListItem key={item.label}>
                       <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
                       <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                     </ListItem>
                     {item.subItem.length !== 0 ? (item.collapse ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
+                    {!open && (<ReactTooltip border={true} id={item.label} place="bottom" type="light" effect="solid" />)}
                   </div>
+                </a>
                 :
                 <Link to={`${url}/${item.path}`}>
                   <div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
+                    <a data-tip={item.label} data-for={item.label}>
                       <ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
                         <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
                         <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                       </ListItem>
+                    </a>
+                    {!open && (<ReactTooltip border={true} id={item.label} place="bottom" type="light" effect="solid" />)}
                   </div>
                 </Link>
               }
@@ -535,11 +542,14 @@ export default function MiniDrawer() {
                       {item.subItem.map((sub, indexs) => {
                         return (
                           <Link to={sub.label === "Logout" ? `/` : `${url}/${sub.path}`}>
+                            <a data-tip={sub.label} data-for={sub.label}>
                               <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}>
                                 <ListItem button style={{ paddingLeft: 57 }}>
                                   <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
                                 </ListItem>
                               </div>
+                            </a>
+                            {!open && (<ReactTooltip border={true} id={sub.label} place="bottom" type="light" effect="solid" />)}
                           </Link>
                         )
                       })}
@@ -559,20 +569,26 @@ export default function MiniDrawer() {
           {setting.map((item, index) => (
             <div style={{ marginTop: index === 0 ? null : 5 }} >
               {item.subItem.length !== 0 ?
+                <a data-tip={item.label} data-for={item.label}>
                   <div style={{ justifyContent: 'space-between', flexDirection: 'row', display: 'flex', paddingLeft: 5, paddingRight: 10, cursor: 'pointer' }} onClick={() => { handleCollapseSetting(item) }}>
                     <ListItem key={item.label}>
                       <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} /></ListItemIcon>
                       <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                     </ListItem>
                     {item.subItem.length !== 0 ? (item.collapse ? <ExpandLess style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} /> : <ExpandMore style={{ color: "#525355", marginLeft: 50, alignSelf: 'center' }} />) : null}
+                    {!open && (<ReactTooltip border={true} id={item.label} place="bottom" type="light" effect="solid" />)}
                   </div>
+                </a>
                 :
                 <Link to={`${url}/${item.path}`}>
                   <div style={{ paddingLeft: 5 }} className={selectedIndex === item.label ? "active" : ""}>
+                    <a data-tip={item.label} data-for={item.label}>
                       <ListItem button key={item.label} onClick={() => selectIndex(item.label)}>
                         <ListItemIcon style={{ minWidth: open ? 40 : 56 }}><img src={item.img} style={{ fill: '#525355' }} /></ListItemIcon>
                         <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{item.label}</Typography>
                       </ListItem>
+                    </a>
+                    {!open && (<ReactTooltip border={true} id={item.label} place="bottom" type="light" effect="solid" />)}
                   </div>
                 </Link>
               }
@@ -583,11 +599,14 @@ export default function MiniDrawer() {
                       {item.subItem.map((sub, indexs) => {
                         return (
                           <Link to={sub.label === "Logout" ? `/` : `${url}/${sub.path}`}>
+                            <a data-tip={sub.label} data-for={sub.label}>
                               <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}>
                                 <ListItem button style={{ paddingLeft: 57 }}>
                                   <Typography style={{ fontFamily: 'Nunito Sans, sans-serif', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
                                 </ListItem>
                               </div>
+                            </a>
+                            {!open && (<ReactTooltip border={true} id={sub.label} place="bottom" type="light" effect="solid" />)}
                           </Link>
                         )
                       })}