Merge pull request #4 from tom2drum/account_nav

account navigation

components/AccountNav/AccountNav.tsx

+import React from 'react';
+import { VStack, Text } from '@chakra-ui/react';
+import AccountNavLink from './AccountNavLink';
+import { FaRegStar, FaTag, FaUserTag, FaCode, FaMarsDouble } from 'react-icons/fa'
+
+const navItems = [
+  { text: 'Watchlist', pathname: '/watchlist', icon: FaRegStar },
+  { text: 'Private tags', pathname: '/private-tags', icon: FaUserTag },
+  { text: 'Public tags', pathname: '/public-tags', icon: FaTag },
+  { text: 'API keys', pathname: '/api-keys', icon: FaMarsDouble },
+  { text: 'Custom ABI', pathname: '/custom-abi', icon: FaCode },
+]
+
+const AccountNav = () => {
+  return (
+    <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>
+  )
+}
+
+export default AccountNav;

components/AccountNav/AccountNavLink.tsx

+import React from 'react';
+import { Link, Icon, Text, HStack } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import type { IconType } from 'react-icons';
+
+interface Props {
+  pathname: string;
+  text: string;
+  icon: IconType;
+}
+
+const AccountNavLink = ({ text, pathname, icon }: 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"
+      >
+        <HStack spacing="4">
+          <Icon as={ icon } boxSize="5"/>
+          <Text>{ text }</Text>
+        </HStack>
+      </Link>
+    </NextLink>
+  )
+}
+
+export default AccountNavLink;

components/Nav/Nav.tsx

-import React from 'react';
-import { Flex, Link } from '@chakra-ui/react';
-import NextLink from 'next/link';
-
-const Nav = () => {
-  return (
-    <Flex
-      w="250px"
-      paddingRight="24px"
-      flexDirection="column"
-      color="blue.600"
-    >
-      <NextLink href="/"><Link padding="8px 0px">Home</Link></NextLink>
-      <NextLink href="/watchlist"><Link padding="8px 0px" >Watchlist</Link></NextLink>
-    </Flex>
-  )
-}
-
-export default Nav;

components/Page/Page.tsx

 import React from 'react';
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, HStack, LightMode } from '@chakra-ui/react';
 
-import Nav from '../Nav/Nav';
+import AccountNav from '../AccountNav/AccountNav';
 
 interface Props {
   children: React.ReactNode;
@@ -9,15 +9,19 @@ interface Props {
 
 const Page = ({ children }: Props) => {
   return (
-    <Flex
-      w="100%"
-      minH="100vh"
-      padding="140px 48px 48px 48px"
-      bgColor="gray.200"
-    >
-      <Nav/>
-      <Box borderRadius="10px" w="100%" overflow="hidden">{ children }</Box>
-    </Flex>
+    <LightMode>
+      <HStack
+        w="100%"
+        minH="100vh"
+        padding="140px 48px 48px 48px"
+        bgColor="gray.200"
+        spacing="12"
+        alignItems="stretch"
+      >
+        <AccountNav/>
+        <Box borderRadius="10px" w="100%" overflow="hidden" bgColor="white">{ children }</Box>
+      </HStack>
+    </LightMode>
   );
 };
 

package.json

@@ -16,7 +16,8 @@
     "framer-motion": "^6",
     "next": "12.1.6",
     "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react-dom": "18.1.0",
+    "react-icons": "^4.4.0"
   },
   "devDependencies": {
     "@types/node": "17.0.36",

pages/index.tsx

@@ -6,7 +6,7 @@ import Page from '../components/Page/Page';
 const Home: NextPage = () => {
   return (
     <Page>
-      <Center h="100%" bgColor="white" color="black">
+      <Center h="100%">
         Home Page
       </Center>
     </Page>

pages/watchlist.tsx

@@ -6,7 +6,7 @@ import Page from '../components/Page/Page';
 const WatchList: NextPage = () => {
   return (
     <Page>
-      <Center h="100%" bgColor="white" color="black">
+      <Center h="100%">
       Watch List Page
       </Center>
     </Page>

yarn.lock

@@ -2684,6 +2684,11 @@ react-focus-lock@^2.9.1:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-icons@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
+  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"