Add responsive header

components/global-header.tsx

@@ -1,29 +1,91 @@
-import { Box, Container, Flex, Image, Link, Stack } from '@chakra-ui/react';
+import {
+  Box,
+  Container,
+  Flex,
+  IconButton,
+  Image,
+  Link,
+  Menu,
+  MenuButton, MenuItem,
+  MenuList,
+  Stack,
+  Text
+} from '@chakra-ui/react';
+import { HamburgerIcon } from '@chakra-ui/icons';
 
-export function GlobalHeader() {
+type MenuLinkProps = {
+  text: string;
+  link: string;
+};
+
+function MenuLink(props: MenuLinkProps) {
+  const { text, link } = props;
+
+  return <Link
+    borderBottomWidth={0}
+    borderBottomColor='gray.500'
+    _hover={{ textDecoration: 'none', borderBottomColor: 'white' }}
+    fontWeight={500}
+    href={link}
+  >
+    {text}
+  </Link>;
+}
+
+function DesktopMenuLinks() {
   return (
-    <Box bg='gray.900' p='20px 30px'>
+    <Stack d={['none', 'flex', 'flex']} shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50'
-      <Container maxW='container.md'>
+           fontSize='15px'>
-        <Flex justifyContent='space-between'>
+      <MenuLink text={'Roadmaps'} link={'/roadmaps'} />
-          <Link d='flex' href='/' alignItems='center' color='white' fontWeight={600}
+      <MenuLink text={'Guides'} link={'/guides'} />
-                _hover={{ textDecoration: 'none' }} fontSize='18px'>
+      <MenuLink text={'Videos'} link={'/watch'} />
-            <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
+
-            roadmap.sh
-          </Link>
-          <Stack shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50' fontSize='15px'>
-            <Link borderBottomWidth={0} borderBottomColor='gray.500'
-                  _hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
-                  href='/roadmaps'>Roadmaps</Link>
-            <Link borderBottomWidth={0} borderBottomColor='gray.500'
-                  _hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
-                  href='/guides'>Guides</Link>
-            <Link borderBottomWidth={0} borderBottomColor='gray.500'
-                  _hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
-                  href='/watch'>Videos</Link>
       <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
             _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
             fontWeight={500} href={'#'}>Subscribe</Link>
     </Stack>
+  );
+}
+
+function MobileMenuLinks() {
+  return (
+    <Menu>
+      <MenuButton
+        d={['block', 'none', 'none']}
+        as={HamburgerIcon}
+        aria-label='Options'
+        variant='outline'
+        color='white' w='22px' height='22px'
+        cursor='pointer'
+      />
+      <MenuList py={'4px'} rounded='3px' minWidth='150px'>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Roadmaps</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Guides</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Videos</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' fontSize='13px' color='gray.600'>Subscribe</MenuItem>
+      </MenuList>
+    </Menu>
+  );
+}
+
+export function GlobalHeader() {
+  return (
+    <Box bg='gray.900' p='20px 0'>
+      <Container maxW='container.md'>
+        <Flex justifyContent='space-between' alignItems='center'>
+          <Link w='100%'
+                d='flex'
+                href='/'
+                alignItems='center'
+                color='white'
+                fontWeight={600}
+                _hover={{ textDecoration: 'none' }}
+                fontSize='18px'>
+            <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
+            <Text d={['none', 'none', 'block']} as='span'>roadmap.sh</Text>
+          </Link>
+          <DesktopMenuLinks />
+          <MobileMenuLinks />
         </Flex>
       </Container>
     </Box>