Переглянути джерело

update nav style

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>
ruiyi.jiang 1 рік тому
батько
коміт
b2c055b4fb
1 змінених файлів з 13 додано та 5 видалено
  1. 13 5
      client/src/components/menu/NavMenu.tsx

+ 13 - 5
client/src/components/menu/NavMenu.tsx

@@ -20,7 +20,7 @@ const duration = `${timeout}ms`;
 const useStyles = makeStyles((theme: Theme) =>
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
   createStyles({
     root: {
     root: {
-      borderRight: '1px solid #eee',
+      borderRight: '1px solid #efefef',
       background: '#fff',
       background: '#fff',
       paddingTop: 0,
       paddingTop: 0,
       paddingBottom: theme.spacing(4),
       paddingBottom: theme.spacing(4),
@@ -41,12 +41,15 @@ const useStyles = makeStyles((theme: Theme) =>
       paddingLeft: theme.spacing(4),
       paddingLeft: theme.spacing(4),
     },
     },
     item: {
     item: {
-      marginBottom: theme.spacing(1),
+      marginBottom: theme.spacing(0.5),
       paddingLeft: theme.spacing(3),
       paddingLeft: theme.spacing(3),
       boxSizing: 'content-box',
       boxSizing: 'content-box',
       height: theme.spacing(3),
       height: theme.spacing(3),
       width: 'initial',
       width: 'initial',
       color: theme.palette.attuGrey.dark,
       color: theme.palette.attuGrey.dark,
+      '&:hover': {
+        backgroundColor: '#efefef',
+      },
     },
     },
     itemIcon: {
     itemIcon: {
       minWidth: '20px',
       minWidth: '20px',
@@ -57,6 +60,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 
         '& path': {
         '& path': {
           stroke: theme.palette.attuGrey.dark,
           stroke: theme.palette.attuGrey.dark,
+          strokeWidth: 2,
         },
         },
       },
       },
     },
     },
@@ -65,6 +69,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     },
     active: {
     active: {
       color: '#000',
       color: '#000',
+      backgroundColor: '#efefef',
 
 
       '& .icon': {
       '& .icon': {
         stroke: theme.palette.primary.main,
         stroke: theme.palette.primary.main,
@@ -73,6 +78,9 @@ const useStyles = makeStyles((theme: Theme) =>
           stroke: theme.palette.primary.main,
           stroke: theme.palette.primary.main,
         },
         },
       },
       },
+      '& span': {
+        fontWeight: 'bold',
+      },
     },
     },
 
 
     logoWrapper: {
     logoWrapper: {
@@ -105,7 +113,7 @@ const useStyles = makeStyles((theme: Theme) =>
       position: 'fixed',
       position: 'fixed',
       borderRadius: '50%',
       borderRadius: '50%',
       backgroundColor: 'white',
       backgroundColor: 'white',
-      top: '74px',
+      top: '64px',
       transition: theme.transitions.create('all', {
       transition: theme.transitions.create('all', {
         duration,
         duration,
       }),
       }),
@@ -129,11 +137,11 @@ const useStyles = makeStyles((theme: Theme) =>
       transform: 'rotateZ(180deg)',
       transform: 'rotateZ(180deg)',
     },
     },
     collapseIcon: {
     collapseIcon: {
-      left: theme.spacing(7.5),
+      left: 58,
     },
     },
     version: {
     version: {
       position: 'absolute',
       position: 'absolute',
-      left: theme.spacing(2.5),
+      left: 16,
       bottom: (props: any) => (props.expanded ? '20px' : '70px'),
       bottom: (props: any) => (props.expanded ? '20px' : '70px'),
     },
     },
   })
   })