Menu and guides listing changes

components/global-header.tsx

@@ -1,17 +1,7 @@
-import {
+import { Box, CloseButton, Container, Flex, IconButton, Image, Link, Stack, Text } from '@chakra-ui/react';
-  Box,
-  Container,
-  Flex,
-  IconButton,
-  Image,
-  Link,
-  Menu,
-  MenuButton, MenuItem,
-  MenuList,
-  Stack,
-  Text
-} from '@chakra-ui/react';
 import { HamburgerIcon } from '@chakra-ui/icons';
+import { useState } from 'react';
+import siteConfig from '../content/site.json';
 
 type MenuLinkProps = {
   text: string;
@@ -48,27 +38,49 @@ function DesktopMenuLinks() {
 }
 
 function MobileMenuLinks() {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <Menu autoSelect={false}>
+    <>
-      <MenuButton
+      <IconButton
+        rounded='5px'
+        padding={0}
+        aria-label={'Menu'}
         d={['block', 'none', 'none']}
-        as={HamburgerIcon}
+        icon={<HamburgerIcon color='white' w='25px' height='25px' />}
-        aria-label='Options'
+        color='white'
-        variant='outline'
-        color='white' w='22px' height='22px'
         cursor='pointer'
+        h='auto'
+        bg='transparent'
+        _hover={{ bg: 'transparent' }}
+        _active={{ bg: 'transparent' }}
+        _focus={{ bg: 'transparent' }}
+        onClick={() => setIsOpen(true)}
       />
-      <MenuList py={'4px'} rounded='3px' minWidth='150px'>
+
-        <MenuItem href={'/roadmaps'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+      {isOpen && (
-                  color='gray.600'>Roadmaps</MenuItem>
+        <Stack color='gray.100'
-        <MenuItem href={'/guides'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+               fontSize={['22px', '22px', '22px', '32px']}
-                  color='gray.600'>Guides</MenuItem>
+               alignItems='center'
-        <MenuItem href={'/watch'} as={Link} py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+               justifyContent='center'
-                  color='gray.600'>Videos</MenuItem>
+               pos='fixed'
-        <MenuItem href='/signup' as={Link} py='4px' borderColor='gray.100' fontSize='13px'
+               left={0}
-                  color='gray.600'>Subscribe</MenuItem>
+               right={0}
-      </MenuList>
+               bottom={0}
-    </Menu>
+               top={0}
+               bg='gray.900'
+               spacing='12px'
+               zIndex={1}
+        >
+          <Link href='/roadmaps'>Roadmaps</Link>
+          <Link href='/guides'>Guides</Link>
+          <Link href='/watch'>Videos</Link>
+          <Link target='_blank' href={siteConfig.url.youtube}>YouTube</Link>
+          <Link href='/signup'>Subscribe</Link>
+          <CloseButton onClick={() => setIsOpen(false)} pos='fixed' top='3px' right='15px' size='lg' />
+        </Stack>
+      )}
+    </>
   );
 }
 

components/page-header.tsx

@@ -11,12 +11,12 @@ export function PageHeader(props: PageHeaderProps) {
   const { title, subtitle, children } = props;
 
   return (
-    <Box pt={['20px', '20px', '45px']} pb={['15px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
+    <Box pt={['25px', '20px', '45px']} pb={['20px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
       <Container maxW='container.md' position='relative'>
         <Heading
           as='h1'
           color='black'
-          fontSize={['25px', '25px', '40px']}
+          fontSize={['33px', '33px', '40px']}
           fontWeight={700}
           mb={['2px', '2px', '5px']}
         >

pages/guides/components/guide-grid-item.tsx

@@ -2,6 +2,7 @@ import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
 
 type GuideGridItemProps = {
   title: string;
+  href: string;
   subtitle: string;
   date: string;
   isNew?: boolean;
@@ -14,17 +15,17 @@ const bgColorList = [
 ];
 
 export function GuideGridItem(props: GuideGridItemProps) {
-  const { title, subtitle, date, isNew = false, colorIndex = 0 } = props;
+  const { title, subtitle, date, isNew = false, colorIndex = 0, href } = props;
 
   return (
-    <Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
+    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
-          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
+         rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='10px' fontSize='13px' color='gray.400'>
         {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
         {date}
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
       <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-    </Link>
+    </Box>
   );
 }

pages/guides/index.tsx

@@ -25,12 +25,13 @@ export default function Guides(props: GuidesProps) {
       <Box mb='60px'>
         <PageHeader
           title={'Visual Guides'}
-          subtitle={'Succinct graphical explanations to development related topics.'}
+          subtitle={'Succinct graphical explanations to engineering topics.'}
         />
         <Container maxW='container.md' position='relative'>
           <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
             {recentGuides.map((recentGuide, counter) => (
               <GuideGridItem
+                href={recentGuide.url}
                 key={recentGuide.id}
                 title={recentGuide.title}
                 subtitle={recentGuide.description}