added mobile navbar

Author: a-saran

src/components/nav.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Box, Flex, PseudoBox } from '@chakra-ui/core'
+import { Box, Flex, PseudoBox, Icon } from '@chakra-ui/core'
 import Link from './link'
 
 // TODO: mobile nav fix
@@ -40,7 +40,7 @@ const Nav = ({ logo, links,}) => {
        ))}
       </Flex>
       <Box display={['block', 'none']} p={1} onClick={() => setIsOpen(!isOpen)}>
-        <Box height='3px' bg='primary' marginBottom='5px' width={'30px'}/>
+        <Box height='3px' bg='primary' marginBottom='5px' width={'25px'}/>
         <Box height='3px' bg='primary' marginBottom='5px'/>
         <Box height='3px' bg='primary' marginBottom='5px'/>
       </Box>
@@ -53,16 +53,22 @@ const Nav = ({ logo, links,}) => {
           left='0'
           bg='secondary'
           flexDirection='column'
-          justify='space-between'
           align='center'
+          zIndex='5'
         >
+          <Flex p='2' justifyContent='flex-end' width='100%'>
+            <Icon name="close" p='1' onClick={() => setIsOpen(false)}/>
+          </Flex>
           {links.map(({ link, title }) => (
             <Box
               as={Link}
               px={1}
               to={link}
               key={link}
               fontFamily='body'
+              py={3}
+              fontSize={'desktop.3'}
+              userSelect='none'
             >
               {title}
             </Box>

src/templates/layout.js

@@ -244,7 +244,7 @@ const Layout = ({ children }) => (
             <Global
               styles={globalStyle}
             />
-            <Box maxWidth='maxContainerWidth' m={['1' ,'auto']} fontSize={[1,'desktop.1']}>
+            <Box maxWidth='maxContainerWidth' m='auto' mx={['1', 0]} fontSize={[1,'desktop.1']}>
               <Helmet
                 meta={[
                   { name: "referrer", content: "origin" },