feat: disable inactive routes

solana-labs · Jul 30, 2019 · dc4a254 · dc4a254
1 parent 893cc1e
commit dc4a254
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 15 deletions.
diff --git a/src/v2/components/Dashboard/NetworkOverview/index.jsx b/src/v2/components/Dashboard/NetworkOverview/index.jsx
@@ -37,7 +37,7 @@ const NetworkOverview = () => {
   return (
     <Container>
       <div className={classes.root}>
-        <SectionHeader title="Network Overview" />
+        <SectionHeader title={<div>Network Overview <div className={classes.betaLabel}>Beta</div></div>} />
         <Grid container spacing={2} className={classes.row}>
           <Grid item xs={12} md={6}>
             <TPS />

diff --git a/src/v2/components/Dashboard/NetworkOverview/styles.js b/src/v2/components/Dashboard/NetworkOverview/styles.js
@@ -1,4 +1,5 @@
 import {makeStyles} from '@material-ui/core';
+import getColor from 'v2/utils/getColor';
 
 export default makeStyles(theme => ({
   root: {
@@ -11,4 +12,9 @@ export default makeStyles(theme => ({
   row: {
     marginBottom: 8,
   },
+  betaLabel: {
+    fontSize: 15,
+    color: getColor('main')(theme),
+    lineHeight: 1
+  }
 }));
diff --git a/src/v2/components/NavBar/index.jsx b/src/v2/components/NavBar/index.jsx
@@ -60,15 +60,33 @@ const NavBar = ({
   const theme = useTheme();
   const showDrawer = useMediaQuery(theme.breakpoints.up('md'));
   const routes = [
-    'dashboard',
-    'transactions',
-    'validators',
-    'tour-de-sol',
-    'applications',
-    'blocks',
-    'favorites',
+    {
+      link: 'dashboard',
+    },
+    {
+      link: 'transactions',
+      disabled: true,
+    },
+    {
+      link: 'validators',
+    },
+    {
+      link: 'tour-de-sol',
+    },
+    {
+      link: 'applications',
+      disabled: true,
+    },
+    {
+      link: 'blocks',
+      disabled: true,
+    },
+    {
+      link: 'favorites',
+      disabled: true,
+    },
   ];
-  const renderLink = link => {
+  const renderLink = ({link, disabled}: {link: string, disabled?: boolean}) => {
     const Icon = icons[link];
     const isDashboard = eq('dashboard', link);
     const selected =
@@ -86,6 +104,7 @@ const NavBar = ({
         button
         component="a"
         key={link}
+        disabled={disabled}
         classes={{root: classes.item, selected: classes.itemSelected}}
       >
         <ListItemIcon className={classes.icon}>
@@ -95,6 +114,7 @@ const NavBar = ({
           classes={{primary: classes.itemText, root: classes.itemTextRoot}}
           primary={link}
         />
+        {disabled && <div className={classes.coming}>Coming Soon</div>}
       </ListItem>
     );
   };

diff --git a/src/v2/components/NavBar/styles.js b/src/v2/components/NavBar/styles.js
@@ -9,6 +9,17 @@ export default makeStyles(theme => ({
       width: 0,
     },
   },
+  coming: {
+    position: 'absolute',
+    fontSize: 12,
+    color: getColor('main')(theme),
+    opacity: 0,
+    transition: '.15s ease-in-out',
+    bottom: -8,
+    [theme.breakpoints.down('sm')]: {
+      opacity: 1,
+    },
+  },
   toolbar: {
     display: 'flex',
     alignItems: 'center',
@@ -25,9 +36,6 @@ export default makeStyles(theme => ({
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    [theme.breakpoints.down('sm')]: {
-      height: 97,
-    },
   },
   icon: {
     justifyContent: 'center',
@@ -52,6 +60,10 @@ export default makeStyles(theme => ({
       opacity: 1,
       visibility: 'visible',
     },
+    '&:hover a div:nth-child(3)': {
+      opacity: 1,
+      visibility: 'visible',
+    },
     [theme.breakpoints.down('sm')]: {
       width: '100%',
       background: getColor('dark')(theme),
@@ -63,9 +75,16 @@ export default makeStyles(theme => ({
     transition: '.15s ease-in-out',
     overflowX: 'hidden',
     overflowY: 'auto',
+    height: '100%',
     '&:hover': {
       width: 225,
     },
+    [theme.breakpoints.down('sm')]: {
+      width: '100%',
+      '&:hover': {
+        width: '100%',
+      },
+    },
   },
   menuButton: {
     marginLeft: 'auto',
@@ -86,15 +105,16 @@ export default makeStyles(theme => ({
     visibility: 'hidden',
     position: 'absolute',
     bottom: 2,
+    [theme.breakpoints.down('sm')]: {
+      opacity: 1,
+      visibility: 'visible',
+    },
   },
   itemText: {
     textTransform: 'uppercase',
     fontSize: 15,
     fontWeight: 'bold',
     letterSpacing: 2.5,
     whiteSpace: 'nowrap',
-    [theme.breakpoints.down('sm')]: {
-      marginLeft: 38,
-    },
   },
 }));