refine expand menu style

client/src/components/menu/NavMenu.tsx

@@ -1,5 +1,7 @@
 import { useState, FC, useEffect } from 'react';
+import clsx from 'clsx';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -14,17 +16,18 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       background: theme.palette.common.white,
+      paddingTop: 0,
       paddingBottom: theme.spacing(5),
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-between',
       transition: theme.transitions.create('width', {
-        duration: theme.transitions.duration.enteringScreen,
+        duration: '100ms',
       }),
       overflow: 'hidden',
     },
     rootCollapse: {
-      width: '60px',
+      width: '86px',
     },
     rootExpand: {
       width: (props: any) => props.width || '100%',
@@ -34,6 +37,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     item: {
       marginBottom: theme.spacing(2),
+      paddingLeft: theme.spacing(4),
       boxSizing: 'content-box',
       height: theme.spacing(3),
       width: 'initial',
@@ -51,9 +55,19 @@ const useStyles = makeStyles((theme: Theme) =>
         },
       },
     },
+    itemText: {
+      opacity: 0,
+      transition: theme.transitions.create('opacity', {
+        duration: '100ms',
+      }),
+      whiteSpace: 'nowrap',
+    },
+    itemTextExpand: {
+      opacity: 1,
+    },
     active: {
       color: theme.palette.primary.main,
-      borderLeft: `4px solid ${theme.palette.primary.main}`,
+      borderRight: `2px solid ${theme.palette.primary.main}`,
 
       '& .icon': {
         '& path': {
@@ -65,56 +79,87 @@ const useStyles = makeStyles((theme: Theme) =>
     logoWrapper: {
       width: '100%',
       display: 'flex',
-      justifyContent: 'center',
       alignItems: 'center',
-
-      marginTop: theme.spacing(3),
-
+      height: '86px',
       marginBottom: theme.spacing(8),
+      backgroundColor: theme.palette.primary.main,
+      paddingLeft: theme.spacing(4),
 
       '& .title': {
         margin: 0,
         fontSize: '16px',
-        lineHeight: '19px',
         letterSpacing: '0.15px',
-        color: '#323232',
+        color: 'white',
         whiteSpace: 'nowrap',
+        lineHeight: '86px',
+        opacity: 0,
+        transition: theme.transitions.create('opacity', {
+          duration: '100ms',
+        }),
+      },
+    },
+    logoWrapperExpand: {
+      '& .title': {
+        opacity: 1,
       },
     },
     logo: {
-      marginRight: theme.spacing(1),
       transition: theme.transitions.create('all', {
-        duration: theme.transitions.duration.enteringScreen,
+        duration: '100ms',
       }),
     },
+    logoExpand: {
+      marginRight: theme.spacing(1),
+      // backgroundColor: theme.palette.primary.main,
+      '& path': {
+        fill: 'white',
+      },
+    },
     logoCollapse: {
       backgroundColor: theme.palette.primary.main,
       '& path': {
         fill: 'white',
       },
       transform: 'scale(1.5)',
+      // padding: theme.spacing(1),
+      // transform: 'scale(1.5)',
     },
     actionIcon: {
       position: 'fixed',
       borderRadius: '50%',
       backgroundColor: 'white',
-      top: '50%',
+      top: '75px',
       transition: theme.transitions.create('all', {
-        duration: theme.transitions.duration.enteringScreen,
+        duration: '100ms',
       }),
+      minWidth: '24px',
+      padding: 0,
+
+      '& svg path': {
+        fill: theme.palette.milvusGrey.dark,
+      },
+
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+
+        '& svg path': {
+          fill: 'white',
+        },
+      },
     },
     expandIcon: {
       left: '187px',
       transform: 'rotateZ(180deg)',
     },
     collapseIcon: {
-      left: '47px',
+      left: '73px',
     },
+
   })
 );
 
 const NavMenu: FC<NavMenuType> = props => {
-  const { width, data, defaultActive = '', defaultOpen = {} } = props;
+  const { width, data, defaultActive = '' } = props;
   const classes = useStyles({ width });
   const [expanded, setExpanded] = useState<boolean>(true);
   const [active, setActive] = useState<string>(defaultActive);
@@ -129,7 +174,7 @@ const NavMenu: FC<NavMenuType> = props => {
   }, [defaultActive]);
 
   const NestList = (props: { data: NavMenuItem[]; className?: string }) => {
-    const { className, data } = props;
+    const { className = '', data } = props;
     return (
       <>
         {data.map((v: NavMenuItem) => {
@@ -146,11 +191,12 @@ const NavMenu: FC<NavMenuType> = props => {
               button
               key={v.label}
               title={v.label}
-              className={`
-                ${className || ''} 
-                ${classes.item} 
-                ${isActive ? classes.active : ''}
-                `}
+              className={
+                clsx(classes.item, {
+                  [className]: className,
+                  [classes.active]: isActive,
+                })
+              }
               onClick={() => {
                 setActive(v.label);
                 v.onClick && v.onClick();
@@ -160,7 +206,13 @@ const NavMenu: FC<NavMenuType> = props => {
                 <IconComponent classes={{ root: iconClass }} />
               </ListItemIcon>
 
-              <ListItemText hidden={!expanded} primary={v.label} />
+              <ListItemText
+                className={
+                  clsx(classes.itemText, {
+                    [classes.itemTextExpand]: expanded,
+                  })
+                }
+                primary={v.label} />
             </ListItem>
           );
         })}
@@ -171,19 +223,42 @@ const NavMenu: FC<NavMenuType> = props => {
   const Logo = icons.milvus;
 
   return (
-    <List component="nav" className={`${expanded ? classes.rootExpand : classes.rootCollapse} ${classes.root} `}>
+    <List component="nav" className={
+      clsx(classes.root, {
+        [classes.rootExpand]: expanded,
+        [classes.rootCollapse]: !expanded,
+      })
+    }>
       <div>
-        <div className={classes.logoWrapper}>
-          <Logo classes={{ root: classes.logo }} className={`${expanded ? '' : classes.logoCollapse}`} />
-          <ChevronRightIcon
-            onClick={() => { setExpanded(!expanded) }}
-            className={`${expanded ? classes.expandIcon : classes.collapseIcon} ${classes.actionIcon}`}
+        <div className={
+          clsx(classes.logoWrapper, {
+            [classes.logoWrapperExpand]: expanded,
+          })
+        }>
+          <Logo
+            classes={{ root: classes.logo }}
+            className={
+              clsx({
+                [classes.logoExpand]: expanded,
+                [classes.logoCollapse]: !expanded,
+              })
+            }
           />
-          <Typography hidden={!expanded} variant="h3" className="title">
+          <Typography variant="h3" className="title">
             {milvusTrans.admin}
           </Typography>
         </div>
-
+        <Button
+          onClick={() => { setExpanded(!expanded) }}
+          className={
+            clsx(classes.actionIcon, {
+              [classes.expandIcon]: expanded,
+              [classes.collapseIcon]: !expanded,
+            })
+          }
+        >
+          <ChevronRightIcon />
+        </Button>
         <NestList data={data} />
       </div>
     </List>