refactor nav link to separate component and add some styles

components/AccountNav/AccountNav.tsx

 import React from 'react';
-import { Flex, Link } from '@chakra-ui/react';
-import NextLink from 'next/link';
+import { VStack, Text } from '@chakra-ui/react';
+import AccountNavLink from './AccountNavLink';
+
+const navItems = [
+  { text: 'Watchlist', pathname: '/watchlist' },
+  { text: 'Private tags', pathname: '/private-tags' },
+  { text: 'Public tags', pathname: '/public-tags' },
+  { text: 'API keys', pathname: '/api-keys' },
+  { text: 'Custom ABI', pathname: '/custom-abi' },
+]
 
 const AccountNav = () => {
   return (
-    <Flex
-      w="250px"
-      flexDirection="column"
-      color="blue.600"
-    >
-      <NextLink href="/" passHref><Link padding="8px 0px">Home</Link></NextLink>
-      <NextLink href="/watchlist" passHref><Link padding="8px 0px" >Watchlist</Link></NextLink>
-    </Flex>
+    <VStack alignItems="flex-start" spacing="4">
+      <Text
+        paddingLeft="16px"
+        fontSize="12px"
+        lineHeight="20px"
+        color="gray.600"
+      >
+        Watch List & Notes
+      </Text>
+      <VStack spacing="3">
+        { navItems.map((item) => <AccountNavLink key={ item.text } { ...item }/>) }
+      </VStack>
+    </VStack>
   )
 }
 

components/AccountNav/AccountNavLink.tsx

+import React from 'react';
+import { Link } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+
+interface Props {
+  pathname: string;
+  text: string;
+}
+
+const AccountNavLink = ({ text, pathname }: Props) => {
+  const router = useRouter();
+  const isActive = router.pathname === pathname;
+
+  return (
+    <NextLink href={ pathname } passHref>
+      <Link
+        w="220px"
+        p="15px 20px"
+        color={ isActive ? 'white' : 'black' }
+        bgColor={ isActive ? 'green.700' : 'transparent' }
+        borderRadius="10px"
+      >
+        { text }
+      </Link>
+    </NextLink>
+  )
+}
+
+export default AccountNavLink;