navigation links

lib/hooks/useNavItems.tsx

+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 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 useBasePath from 'lib/hooks/useBasePath';
+
+export default function useNavItems() {
+  const basePath = useBasePath();
+
+  return React.useMemo(() => {
+    const mainNavItems = [
+      { text: 'Blocks', pathname: basePath + '/blocks', icon: blocksIcon },
+      { text: 'Transactions', pathname: basePath + '/transactions', icon: transactionsIcon },
+      { text: 'Tokens', pathname: basePath + '/tokens', icon: tokensIcon },
+      { text: 'Apps', pathname: basePath + '/apps', icon: appsIcon },
+      { text: 'Other', pathname: basePath + '/other', icon: gearIcon },
+    ];
+
+    const accountNavItems = [
+      { text: 'Watchlist', pathname: basePath + '/watchlist', icon: watchlistIcon },
+      { text: 'Private tags', pathname: basePath + '/private-tags', icon: privateTagIcon },
+      { text: 'Public tags', pathname: basePath + '/public-tags', icon: publicTagIcon },
+      { text: 'API keys', pathname: basePath + '/api-keys', icon: apiKeysIcon },
+      { text: 'Custom ABI', pathname: basePath + '/custom-abi', icon: abiIcon },
+    ];
+
+    return { mainNavItems, accountNavItems };
+  }, [ basePath ]);
+}

ui/header/Burger.tsx

-import { Icon, Box, useColorModeValue } from '@chakra-ui/react';
+import { Icon, Box, Flex, VStack, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useColorModeValue, useDisclosure } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import burgerIcon from 'icons/burger.svg';
+import useNavItems from 'lib/hooks/useNavItems';
+import NavFooter from 'ui/navigation/NavFooter';
+import NavLink from 'ui/navigation/NavLink';
+import NetworkLogo from 'ui/navigation/NetworkLogo';
 
 const Burger = () => {
   const iconColor = useColorModeValue('gray.600', 'white');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { mainNavItems, accountNavItems } = useNavItems();
+  const router = useRouter();
 
   return (
-    <Box padding={ 2 }>
+    <>
+      <Box padding={ 2 } onClick={ onOpen }>
         <Icon
           as={ burgerIcon }
           boxSize={ 6 }
@@ -15,6 +24,32 @@ const Burger = () => {
           color={ iconColor }
         />
       </Box>
+      <Drawer
+        isOpen={ isOpen }
+        placement="left"
+        onClose={ onClose }
+      >
+        <DrawerOverlay bgColor="blackAlpha.800"/>
+        <DrawerContent maxWidth="260px">
+          <DrawerBody p={ 6 }>
+            <Flex>
+              <NetworkLogo/>
+            </Flex>
+            <Box as="nav" mt={ 8 }>
+              <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+                { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) }
+              </VStack>
+            </Box>
+            <Box as="nav" mt={ 6 }>
+              <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
+                { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) }
+              </VStack>
+            </Box>
+            <NavFooter/>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
   );
 };
 

ui/navigation/NavFooter.tsx

@@ -5,6 +5,7 @@ import ghIcon from 'icons/social/git.svg';
 import statsIcon from 'icons/social/stats.svg';
 import tgIcon from 'icons/social/telega.svg';
 import twIcon from 'icons/social/tweet.svg';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 const SOCIAL_LINKS = [
@@ -15,19 +16,29 @@ const SOCIAL_LINKS = [
 ];
 
 interface Props {
-  isCollapsed: boolean;
+  isCollapsed?: boolean;
 }
 
 const NavFooter = ({ isCollapsed }: Props) => {
+  const isMobile = useIsMobile();
+
+  const width = (() => {
+    if (isMobile) {
+      return '100%';
+    }
+
+    return isCollapsed ? '20px' : '180px';
+  })();
+
   return (
     <VStack
       as="footer"
       spacing={ 8 }
       borderTop="1px solid"
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-      width={ isCollapsed ? '20px' : '180px' }
-      paddingTop={ 8 }
-      marginTop={ 20 }
+      width={ width }
+      paddingTop={ isMobile ? 6 : 8 }
+      marginTop={ isMobile ? 6 : 20 }
       alignItems="flex-start"
       color="gray.500"
       fontSize="xs"

ui/navigation/NavLink.tsx

@@ -2,12 +2,13 @@ import { Link, Icon, Text, HStack, Tooltip } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import useColors from './useColors';
 
 interface Props {
-  isCollapsed: boolean;
+  isCollapsed?: boolean;
   isActive: boolean;
   pathname: string;
   text: string;
@@ -16,13 +17,21 @@ interface Props {
 
 const NavLink = ({ text, pathname, icon, isCollapsed, isActive }: Props) => {
   const colors = useColors();
+  const isMobile = useIsMobile();
+  const width = (() => {
+    if (isMobile) {
+      return '100%';
+    }
+
+    return isCollapsed ? '60px' : '180px';
+  })();
 
   return (
     <NextLink href={ pathname } passHref>
       <Link
         as="li"
         listStyleType="none"
-        w={ isCollapsed ? '60px' : '180px' }
+        w={ width }
         px={ isCollapsed ? '15px' : 3 }
         py={ 2.5 }
         color={ isActive ? colors.text.active : colors.text.default }

ui/navigation/Navigation.tsx

@@ -3,19 +3,9 @@ import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 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 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 * as cookies from 'lib/cookies';
-import useBasePath from 'lib/hooks/useBasePath';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import useNavItems from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import NavFooter from './NavFooter';
@@ -25,24 +15,9 @@ import NetworkMenu from './networkMenu/NetworkMenu';
 
 const Navigation = () => {
   const router = useRouter();
-  const basePath = useBasePath();
   const isMobile = useIsMobile();
 
-  const mainNavItems = [
-    { text: 'Blocks', pathname: basePath + '/blocks', icon: blocksIcon },
-    { text: 'Transactions', pathname: basePath + '/transactions', icon: transactionsIcon },
-    { text: 'Tokens', pathname: basePath + '/tokens', icon: tokensIcon },
-    { text: 'Apps', pathname: basePath + '/apps', icon: appsIcon },
-    { text: 'Other', pathname: basePath + '/other', icon: gearIcon },
-  ];
-
-  const accountNavItems = [
-    { text: 'Watchlist', pathname: basePath + '/watchlist', icon: watchlistIcon },
-    { text: 'Private tags', pathname: basePath + '/private-tags', icon: privateTagIcon },
-    { text: 'Public tags', pathname: basePath + '/public-tags', icon: publicTagIcon },
-    { text: 'API keys', pathname: basePath + '/api-keys', icon: apiKeysIcon },
-    { text: 'Custom ABI', pathname: basePath + '/custom-abi', icon: abiIcon },
-  ];
+  const { mainNavItems, accountNavItems } = useNavItems();
 
   const [ isCollapsed, setCollapsedState ] = React.useState(cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED) === 'true');
 

ui/shared/Page/Page.tsx

@@ -19,7 +19,7 @@ const Page = ({ children }: Props) => {
       alignItems="stretch"
     >
       <Navigation/>
-      <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? '104px' : 9 }>
+      <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? '104px' : 9 } paddingBottom={ 10 }>
         <Header/>
         <Box
           as="main"