Merge pull request #41 from miralsuthar/feat/hamburger-navbar

Hamburger menu for responsive navbar
Developer-DAO · Nov 25, 2021 · 13d05c3 · 13d05c3 · vercel · Nov 25, 2021
2 parents c0e970b + fe452f6
commit 13d05c3
Show file tree

Hide file tree

Showing 3 changed files with 5,244 additions and 7 deletions.
diff --git a/client/components/navigation/Navbar.tsx b/client/components/navigation/Navbar.tsx
@@ -1,14 +1,31 @@
-import React from 'react';
-import { useEthers } from '@usedapp/core';
+import React, { useState } from 'react';
 
 import NextLink from 'next/link';
 
-import { chakra, Link, Text, Flex, HStack, Image } from '@chakra-ui/react';
+import {
+  chakra,
+  Link,
+  LinkOverlay,
+  Flex,
+  HStack,
+  Image,
+  Button,
+  VStack,
+  useDisclosure,
+  IconButton,
+} from '@chakra-ui/react';
+
+import { useEthers } from '@usedapp/core';
+
+import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
 
 import { ButtonBlack } from '../../styles/ui-components/Chakra-Button';
 
 function Navbar() {
+
+  const hamburger = useDisclosure();
   const { account } = useEthers();
+
   return (
     <chakra.nav borderBottom="1px solid" borderColor="gray.200">
       <Flex
@@ -19,8 +36,12 @@ function Navbar() {
         py={3}
         px={5}
       >
-        <NextLink href={'/'} passHref>
-          <HStack as="a" display="flex" alignItems="center">
+        <NextLink
+         href={"/"} passHref>
+          <HStack
+          as="a"
+          display="flex"
+          alignItems="center">
             <Image
               borderRadius="full"
               boxSize="30px"
@@ -39,7 +60,72 @@ function Navbar() {
           </HStack>
         </NextLink>
 
-        <HStack spacing={{ base: 2, sm: 7 }}>
+        <IconButton
+          aria-label={hamburger.isOpen ? 'Close menu' : 'Open menu'}
+          display={{ sm: 'block', md: 'none' }}
+          zIndex={11}
+          onClick={hamburger.onToggle}
+          icon={
+            hamburger.isOpen ? (
+              <CloseIcon w={7} h={7} />
+            ) : (
+              <HamburgerIcon w={6} h={6} />
+            )
+          }
+        />
+
+        {hamburger.isOpen && (
+          <VStack
+            position="fixed"
+            zIndex={10}
+            top={0}
+            left={0}
+            h="100%"
+            w="100%"
+            display={{ sm: 'flex', md: 'none' }}
+            bg="white"
+            spacing={10}
+            fontSize="3xl"
+            pt={20}
+            onClick={hamburger.onClose}
+          >
+          <NextLink href={'/jobs'} passHref>
+          <Link
+            color="black"
+            p="0.45rem"
+            borderRadius="18px"
+            _hover={{textDecoration: "none", bgColor:"#e2e8f0"}}
+            _focus={{textDecoration: "none", border:"none"}}
+            >Jobs</Link>
+        </NextLink>
+        <NextLink href={'/developers'} passHref>
+          <Link
+            color="black"
+            p="0.45rem"
+            borderRadius="18px"
+            _hover={{textDecoration: "none", bgColor:"#e2e8f0"}}
+            _focus={{textDecoration: "none", border:"none"}}
+          >Devs</Link>
+        </NextLink>
+        <NextLink href={'/about'} passHref>
+          <Link
+            color="black"
+            p="0.45rem"
+            borderRadius="18px"
+            _hover={{textDecoration: "none", bgColor:"#e2e8f0"}}
+            _focus={{textDecoration: "none", border:"none"}}
+            >About</Link>
+        </NextLink>
+        <NextLink href={"/auth"} passHref>
+          <ButtonBlack
+          as='a'>Sign Up</ButtonBlack>
+        </NextLink>
+      </VStack>
+        )}
+
+        <HStack 
+          display={{ sm: 'none', md: 'flex' }}
+          spacing={{ base: 2, sm: 7 }}>
           <NextLink href={'/jobs'} passHref>
             <Link
               color="black"
@@ -76,10 +162,12 @@ function Navbar() {
         </HStack>
 
         {account ? (
-          <Text>{account}</Text>
+          <>{account}</>
         ) : (
           <NextLink href={'/auth'} passHref>
+            <Link display={{ sm: 'none', md: 'flex' }}>
             <ButtonBlack as="a">Sign Up</ButtonBlack>
+            </Link>
           </NextLink>
         )}
       </Flex>

diff --git a/client/package.json b/client/package.json
@@ -10,6 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.6.12",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",