navigation refactor and toggler

ui/navigation/AccountNavLink.tsx

-import { Link, Icon, Text, HStack } from '@chakra-ui/react';
-import NextLink from 'next/link';
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import useColors from './useColors';
-
-interface Props {
-  pathname: string;
-  text: string;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-}
-
-const AccountNavLink = ({ text, pathname, icon }: Props) => {
-  const router = useRouter();
-  const isActive = router.pathname === pathname;
-
-  const colors = useColors();
-
-  return (
-    <NextLink href={ pathname } passHref>
-      <Link
-        as="li"
-        listStyleType="none"
-        w="180px"
-        px={ 3 }
-        py={ 2.5 }
-        color={ isActive ? colors.text.active : colors.text.default }
-        bgColor={ isActive ? colors.bg.active : colors.bg.default }
-        _hover={{ color: isActive ? colors.text.active : colors.text.hover }}
-        borderRadius="base"
-      >
-        <HStack spacing={ 3 }>
-          <Icon as={ icon } boxSize="30px"/>
-          <Text variant="inherit">{ text }</Text>
-        </HStack>
-      </Link>
-    </NextLink>
-  );
-};
-
-export default AccountNavLink;

ui/navigation/AccountNavigation.tsx

-import { Box, VStack } from '@chakra-ui/react';
-import React from 'react';
-
-import ABIIcon from 'icons/ABI.svg';
-import ApiKeysIcon from 'icons/API.svg';
-import PrivateTagIcon from 'icons/privattags.svg';
-import PublicTagIcon from 'icons/publictags.svg';
-import WatchlistIcon from 'icons/watchlist.svg';
-
-import AccountNavLink from './AccountNavLink';
-
-const navItems = [
-  { text: 'Watchlist', pathname: '/watchlist', icon: WatchlistIcon },
-  { text: 'Private tags', pathname: '/private-tags', icon: PrivateTagIcon },
-  { text: 'Public tags', pathname: '/public-tags', icon: PublicTagIcon },
-  { text: 'API keys', pathname: '/api-keys', icon: ApiKeysIcon },
-  { text: 'Custom ABI', pathname: '/custom-abi', icon: ABIIcon },
-];
-
-const AccountNavigation = () => {
-  return (
-    <Box as="nav" mt={ 12 }>
-      <VStack as="ul" spacing="2">
-        { navItems.map((item) => <AccountNavLink key={ item.text } { ...item }/>) }
-      </VStack>
-    </Box>
-  );
-};
-
-export default AccountNavigation;

ui/navigation/MainNavigation.tsx

-import { Box, VStack } from '@chakra-ui/react';
-import React from 'react';
-
-import AppsIcon from 'icons/apps.svg';
-import BlocksIcon from 'icons/block.svg';
-import GearIcon from 'icons/gear.svg';
-import TokensIcon from 'icons/token.svg';
-import TransactionsIcon from 'icons/transactions.svg';
-
-import MainNavLink from './MainNavLink';
-
-const navItems = [
-  { text: 'Blocks', pathname: '/blocks', icon: BlocksIcon },
-  { text: 'Transactions', pathname: '/transactions', icon: TransactionsIcon },
-  { text: 'Tokens', pathname: '/tokens', icon: TokensIcon },
-  { text: 'Apps', pathname: '/apps', icon: AppsIcon },
-  { text: 'Other', pathname: '/other', icon: GearIcon },
-];
-
-const MainNavigation = () => {
-  return (
-    <Box as="nav" mt={ 14 }>
-      <VStack as="ul" spacing="2">
-        { navItems.map((item) => <MainNavLink key={ item.text } { ...item }/>) }
-      </VStack>
-    </Box>
-  );
-};
-
-export default MainNavigation;

ui/navigation/MainNavLink.tsx → ui/navigation/NavLink.tsx

@@ -11,7 +11,7 @@ interface Props {
   icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 }
 
-const MainNavLink = ({ text, pathname, icon }: Props) => {
+const NavLink = ({ text, pathname, icon }: Props) => {
   const router = useRouter();
   const isActive = router.pathname === pathname;
 
@@ -39,4 +39,4 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
   );
 };
 
-export default MainNavLink;
+export default React.memo(NavLink);

ui/navigation/Navigation.tsx

-import { Flex, HStack, Icon, useColorModeValue } from '@chakra-ui/react';
+import { ChevronLeftIcon } from '@chakra-ui/icons';
+import { Flex, HStack, Icon, Box, VStack, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import abiIcon from 'icons/ABI.svg';
+import apiKeysIcon from 'icons/API.svg';
+import appsIcon from 'icons/apps.svg';
+import blocksIcon from 'icons/block.svg';
+import gearIcon from 'icons/gear.svg';
 import logoIcon from 'icons/logo.svg';
 import networksIcon from 'icons/networks.svg';
+import privateTagIcon from 'icons/privattags.svg';
+import publicTagIcon from 'icons/publictags.svg';
+import tokensIcon from 'icons/token.svg';
+import transactionsIcon from 'icons/transactions.svg';
+import watchlistIcon from 'icons/watchlist.svg';
+import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
-import getDefaultTransitionProps from '../../theme/utils/getDefaultTransitionProps';
-import AccountNavigation from './AccountNavigation';
-import MainNavigation from './MainNavigation';
 import NavFooter from './NavFooter';
+import NavLink from './NavLink';
+
+const mainNavItems = [
+  { text: 'Blocks', pathname: '/blocks', icon: blocksIcon },
+  { text: 'Transactions', pathname: '/transactions', icon: transactionsIcon },
+  { text: 'Tokens', pathname: '/tokens', icon: tokensIcon },
+  { text: 'Apps', pathname: '/apps', icon: appsIcon },
+  { text: 'Other', pathname: '/other', icon: gearIcon },
+];
+
+const accountNavItems = [
+  { text: 'Watchlist', pathname: '/watchlist', icon: watchlistIcon },
+  { text: 'Private tags', pathname: '/private-tags', icon: privateTagIcon },
+  { text: 'Public tags', pathname: '/public-tags', icon: publicTagIcon },
+  { text: 'API keys', pathname: '/api-keys', icon: apiKeysIcon },
+  { text: 'Custom ABI', pathname: '/custom-abi', icon: abiIcon },
+];
 
 const Navigation = () => {
   return (
     <Flex
+      position="relative"
       flexDirection="column"
       alignItems="flex-start"
       borderRight="1px solid"
@@ -37,9 +64,30 @@ const Navigation = () => {
           { ...getDefaultTransitionProps() }
         />
       </HStack>
-      <MainNavigation/>
-      <AccountNavigation/>
+      <Box as="nav" mt={ 14 }>
+        <VStack as="ul" spacing="2">
+          { mainNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
+        </VStack>
+      </Box>
+      <Box as="nav" mt={ 12 }>
+        <VStack as="ul" spacing="2">
+          { accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
+        </VStack>
+      </Box>
       <NavFooter/>
+      <ChevronLeftIcon
+        width={ 6 }
+        height={ 6 }
+        bgColor={ useColorModeValue('white', 'black') }
+        border="1px"
+        color={ useColorModeValue('blackAlpha.400', 'whiteAlpha.400') }
+        borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+        borderRadius="base"
+        position="absolute"
+        top="104px"
+        right={ -3 }
+        cursor="pointer"
+      />
     </Flex>
   );
 };