Merge pull request #169 from theprojectcode/orlundos-branch

responsive navbar

Author: with-heart

frontend/package.json

@@ -24,6 +24,7 @@
     "react": "^17.0.2",
     "react-confetti": "^6.0.1",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "use-nft": "^0.10.1",
     "web-vitals": "^1.0.1",
     "web3": "^1.5.3",

frontend/src/components/Nav/index.tsx

@@ -1,21 +1,34 @@
 import React from 'react';
-import { chakra, Flex, HStack } from '@chakra-ui/react';
+
+import {
+  chakra,
+  Box,
+  Flex,
+  useColorModeValue,
+  HStack,
+  useDisclosure,
+  VStack,
+  IconButton,
+  CloseButton,
+} from '@chakra-ui/react';
+import { AiOutlineMenu } from 'react-icons/ai';
+import Logo from '../Logo';
+import { IconGitHub } from '../Icons';
 import Link from 'next/link';
 import { useTranslation } from 'react-i18next';
-import { IconGitHub } from '../Icons';
-import Logo from '../Logo';
 
-function Nav() {
+export default function Nav() {
+  const bg = useColorModeValue('white', 'gray.800');
+  const mobileNav = useDisclosure();
   const { t } = useTranslation();
 
   return (
     <chakra.nav borderBottom="1px solid" borderColor="gray.200">
       <Flex
-        justify="space-between"
-        align="center"
+        alignItems="center"
+        justifyContent="space-between"
         mx="auto"
         maxW="7xl"
-        minW="xl"
         py={3}
         px={5}
       >
@@ -25,42 +38,104 @@ function Nav() {
             <chakra.span
               fontWeight="bold"
               fontSize="sm"
-              color="gray.600"
               transition="color 300ms ease-in-out"
               _hover={{ color: 'black' }}
             >
               {t('title')}
             </chakra.span>
           </HStack>
         </Link>
-        <HStack spacing={{ base: 3, sm: 10 }}>
-          <Link href="/" passHref>
-            {t('home')}
-          </Link>
-          <Link href="/mint" passHref>
-            {t('mintTokenText')}
-          </Link>
-          <Link href="/projects" passHref>
-            {t('projects')}
-          </Link>
-          <chakra.a
-            href="https://github.com/Developer-DAO/developer-dao"
-            target="_blank"
-            rel="noreferrer"
-            title={t('daoGithubRepo')}
+        <HStack display="flex" alignItems="center" spacing={1}>
+          <HStack
+            spacing={{ base: 3, sm: 10 }}
+            display={{ base: 'none', md: 'inline-flex' }}
           >
-            <IconGitHub
-              h={7}
-              w={7}
-              opacity={0.6}
-              transition="opacity 300ms ease-in-out"
-              _hover={{ opacity: 1 }}
+            <Link href="/" passHref>
+              <a>{t('home')}</a>
+            </Link>
+            <Link href="/mint" passHref>
+              <a>{t('mintTokenText')}</a>
+            </Link>
+            <Link href="/projects" passHref>
+              <a>{t('projects')}</a>
+            </Link>
+            <chakra.a
+              href="https://github.com/Developer-DAO/developer-dao"
+              target="_blank"
+              rel="noreferrer"
+              title={t('daoGithubRepo')}
+            >
+              <IconGitHub
+                h={7}
+                w={7}
+                opacity={0.6}
+                transition="opacity 300ms ease-in-out"
+                _hover={{ opacity: 1 }}
+              />
+            </chakra.a>
+          </HStack>
+
+          <Box display={{ base: 'inline-flex', md: 'none' }}>
+            <IconButton
+              display={{ base: 'flex', md: 'none' }}
+              aria-label="Open menu"
+              fontSize="20px"
+              color={useColorModeValue('grey.800', 'inherit')}
+              variant="ghost"
+              icon={<AiOutlineMenu />}
+              onClick={mobileNav.onOpen}
             />
-          </chakra.a>
+
+            <VStack
+              pos="absolute"
+              top={0}
+              left={0}
+              right={0}
+              display={mobileNav.isOpen ? 'flex' : 'none'}
+              flexDirection="column"
+              pt={7}
+              pb={7}
+              m={0}
+              bg={bg}
+              spacing={3}
+              rounded="sm"
+              shadow="sm"
+            >
+              <CloseButton
+                aria-label="Close menu"
+                onClick={mobileNav.onClose}
+              />
+
+              <Link href="/" passHref>
+                <a>{t('home')}</a>
+              </Link>
+
+              <Link href="/mint" passHref>
+                <a>{t('mintTokenText')}</a>
+              </Link>
+
+              <Link href="/projects" passHref>
+                <a>{t('projects')}</a>
+              </Link>
+
+              <chakra.a
+                href="https://github.com/Developer-DAO/developer-dao"
+                target="_blank"
+                rel="noreferrer"
+                title={t('daoGithubRepo')}
+              >
+                <IconGitHub
+                  h={7}
+                  w={7}
+                  opacity={0.6}
+                  transition="opacity 300ms ease-in-out"
+                  _hover={{ opacity: 1 }}
+                />
+              </chakra.a>
+            </VStack>
+          </Box>
         </HStack>
       </Flex>
     </chakra.nav>
   );
 }
-
-export default Nav;

frontend/yarn.lock

@@ -8495,6 +8495,11 @@ react-i18next@^11.8.13:
     "@babel/runtime" "^7.14.5"
     html-parse-stringify "^3.0.1"
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 [email protected], react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"