update navigation style

tauri-wallet/package.json

@@ -14,6 +14,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/styles": "^4.11.4",
     "@types/react-dom": "^17.0.9",
+    "clsx": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0"

tauri-wallet/src/components/Nav.tsx

@@ -1,12 +1,24 @@
-import { List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
+import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import {
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Theme,
+} from '@material-ui/core'
 import {
   AccountBalanceWalletRounded,
   ArrowBack,
   ArrowForward,
+  AttachMoney,
+  Cancel,
   ExitToApp,
+  HowToVote,
+  MoneyOff,
 } from '@material-ui/icons'
-import React from 'react'
-import { Link } from 'react-router-dom'
+import { makeStyles } from '@material-ui/styles'
+import clsx from 'clsx'
 
 const routesSchema = [
   {
@@ -24,6 +36,26 @@ const routesSchema = [
     route: '/receive',
     Icon: <ArrowBack />,
   },
+  {
+    label: 'Bond',
+    route: '/bond',
+    Icon: <AttachMoney />,
+  },
+  {
+    label: 'Unbond',
+    route: '/unbond',
+    Icon: <MoneyOff />,
+  },
+  {
+    label: 'Delegate',
+    route: '/delegate',
+    Icon: <HowToVote />,
+  },
+  {
+    label: 'Undelegate',
+    route: '/undelegate',
+    Icon: <Cancel />,
+  },
   {
     label: 'Logout',
     route: '/signin',
@@ -31,13 +63,43 @@ const routesSchema = [
   },
 ]
 
-export const Nav = () => (
-  <List>
-    {routesSchema.map((r, i) => (
-      <ListItem button component={Link} to={r.route} key={i} color="red">
-        <ListItemIcon>{r.Icon}</ListItemIcon>
-        <ListItemText primary={r.label} />
-      </ListItem>
-    ))}
-  </List>
-)
+const useStyles = makeStyles((theme: Theme) => ({
+  navItem: {
+    color: '#fff',
+    fontSize: 24,
+  },
+  selected: {
+    color: theme.palette.primary.main,
+  },
+}))
+
+export const Nav = () => {
+  const classes = useStyles()
+  const location = useLocation()
+
+  return (
+    <List>
+      {routesSchema.map((r, i) => (
+        <ListItem button component={Link} to={r.route} key={i}>
+          <ListItemIcon
+            className={clsx([
+              classes.navItem,
+              location.pathname === r.route ? classes.selected : undefined,
+            ])}
+          >
+            {r.Icon}
+          </ListItemIcon>
+          <ListItemText
+            primary={r.label}
+            primaryTypographyProps={{
+              className: clsx([
+                classes.navItem,
+                location.pathname === r.route ? classes.selected : undefined,
+              ]),
+            }}
+          />
+        </ListItem>
+      ))}
+    </List>
+  )
+}