Header component (#214)

Add Header component

Author: Marzel7

frontend/src/Components/Header/index.tsx

@@ -1,36 +1,163 @@
+import React, { ReactNode, useState } from 'react';
 import {
-  chakra,
+  Link,
+  Box,
   Flex,
-  HStack,
-  Image,
-  Switch,
   Text,
+  Switch,
+  Image,
+  Stack,
   useColorMode,
+  HStack,
+  BoxProps,
 } from '@chakra-ui/react';
 
-const Header = () => {
+const NavBar = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
   const { colorMode, toggleColorMode } = useColorMode();
+  const toggle = () => setIsOpen(!isOpen);
+
   return (
-    <Flex alignItems={'center'} justify="space-between" w={'full'}>
-      <Flex alignItems="center">
-        <Image
-          width="4rem"
-          h="4rem"
-          src={`/D_D_logo-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
-          alt="logo"
-        />
-        <Text
-          ml={'1.25rem'}
-          fontWeight="bold"
-          variant="medium"
-          color={colorMode === 'dark' ? '#FFFFFF' : '#000000'}
-        >
-          Developer DAO
-        </Text>
+    <NavBarContainer>
+      <Flex
+        alignItems="center"
+        justifyContent="space-between"
+        flex={1}
+        width="100%"
+      >
+        <Box>
+          <Flex alignItems="center">
+            <Image
+              w="4rem"
+              h="4rem"
+              src={`/D_D_logo-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
+              alt="logo"
+            />
+            <Text
+              ml={'1.25rem'}
+              mr={{ base: '1rem', sm: '3rem' }}
+              fontWeight="bold"
+              variant="medium"
+              color={colorMode === 'dark' ? '#FFFFFF' : '#000000'}
+              display={{ base: 'block', md: 'none', lg: 'block' }}
+            >
+              Developer DAO
+            </Text>
+          </Flex>
+        </Box>
+        <MenuToggle toggle={toggle} isOpen={isOpen} />
       </Flex>
-      <Switch onChange={toggleColorMode} colorScheme="blackAlpha" />
+      <HStack
+        spacing={{ base: 4, xl: 10 }}
+        display={{ base: isOpen ? 'flex' : 'none', md: 'flex' }}
+        flexShrink={1}
+        width={{ base: '100%', md: 'auto' }}
+      >
+        <MenuLinks isOpen={isOpen} />
+        <Switch
+          size="md"
+          display={{ base: 'none', md: 'block' }}
+          onChange={toggleColorMode}
+          colorScheme="blackAlpha"
+        />
+      </HStack>
+    </NavBarContainer>
+  );
+};
+
+const CloseIcon = () => (
+  <svg width="24" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <title>Close</title>
+    <path
+      fill="white"
+      d="M9.00023 7.58599L13.9502 2.63599L15.3642 4.04999L10.4142 8.99999L15.3642 13.95L13.9502 15.364L9.00023 10.414L4.05023 15.364L2.63623 13.95L7.58623 8.99999L2.63623 4.04999L4.05023 2.63599L9.00023 7.58599Z"
+    />
+  </svg>
+);
+
+const MenuIcon = () => (
+  <svg
+    width="24px"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="white"
+  >
+    <title>Menu</title>
+    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+  </svg>
+);
+
+const MenuToggle = ({
+  toggle,
+  isOpen,
+}: {
+  toggle: () => void;
+  isOpen: boolean;
+}) => {
+  return (
+    <Box
+      display={{ base: 'auto', md: 'none' }}
+      onClick={toggle}
+      cursor="pointer"
+      justifyContent={'flex-end'}
+    >
+      {isOpen ? <CloseIcon /> : <MenuIcon />}
+    </Box>
+  );
+};
+
+const MenuItem = ({
+  children,
+  to = '/',
+  ...rest
+}: {
+  children: ReactNode;
+  to: string;
+}) => {
+  return (
+    <Link href={to}>
+      <Text display="block" fontSize={'20px'} {...rest}>
+        {children}
+      </Text>
+    </Link>
+  );
+};
+
+const MenuLinks = ({ isOpen }: { isOpen: boolean }) => {
+  return (
+    <Box display={{ base: isOpen ? 'flex' : 'none', md: 'block' }}>
+      <Stack
+        spacing={[0, '16px', null, '24px', '44px']}
+        justify={{ base: 'space-between', md: 'flex-end' }}
+        direction={{ base: 'column', md: 'row' }}
+        pt={[8, 4, 0, 0]}
+      >
+        <MenuItem to="/">Latest Updates</MenuItem>
+        <MenuItem to="/how">Events</MenuItem>
+        <MenuItem to="/DAO Wiki">DAO Wiki </MenuItem>
+        <MenuItem to="/pricing">Job Board </MenuItem>
+        <MenuItem to="/pricing">Projects </MenuItem>
+      </Stack>
+    </Box>
+  );
+};
+
+const NavBarContainer = ({ children }: { children: ReactNode }) => {
+  return (
+    <Flex
+      as="nav"
+      align="center"
+      justify="space-between"
+      flexDir={{ base: 'column', md: 'row' }}
+      wrap="wrap"
+      w="100%"
+      mb={8}
+      py={1}
+      px={3}
+    >
+      {children}
     </Flex>
   );
 };
 
-export default Header;
+export default NavBar;

frontend/src/layout/Page/index.tsx

@@ -34,7 +34,11 @@ function Page({ children }: { children?: object }) {
           </Text>
         </Flex>
       </Marquee>
-      <Stack paddingY="2.06rem" paddingX="5rem" spacing={10}>
+      <Stack
+        paddingY="2.06rem"
+        paddingX={{ base: '16px', md: '4px', lg: '48px' }}
+        spacing={10}
+      >
         <Header />
         {children}
       </Stack>