gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add responsive header

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-28 12:48:48 +02:00
parent 8013c64eb5
commit d3ee830e26
1 changed files with 82 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
components/global-header.tsx
View File

@ -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'>
<Container maxW='container.md'>
<Flex justifyContent='space-between'>
<Link d='flex' href='/' alignItems='center' color='white' fontWeight={600}
_hover={{ textDecoration: 'none' }} fontSize='18px'>
<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>
<Stack d={['none', 'flex', 'flex']} shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50'
fontSize='15px'>
<MenuLink text={'Roadmaps'} link={'/roadmaps'} />
<MenuLink text={'Guides'} link={'/guides'} />
<MenuLink text={'Videos'} link={'/watch'} />
<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>