making header responsinve

DevelopingSpace · Feb 14, 2023 · 1dccecc · 1dccecc
1 parent 65b46d1
commit 1dccecc
Showing 1 changed file with 59 additions and 25 deletions.
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -9,52 +9,86 @@ import {
  MenuList,
  MenuItem,
  IconButton,
+ Show,
+ Hide,
+ Button,
 } from '@chakra-ui/react';
-import { TriangleUpIcon, LockIcon } from '@chakra-ui/icons';
+import { TriangleUpIcon, LockIcon, HamburgerIcon } from '@chakra-ui/icons';
 import { Link, useFetcher } from '@remix-run/react';
 
 import { useUser } from '~/utils';
 
 export default function Header() {
  const user = useUser();
  const fetcher = useFetcher();
+
  return (
  <Flex
  as="header"
  backgroundColor="brand.500"
  height="auto"
+ width="100%"
  alignItems="center"
  shadow="2xl"
  fontSize="18"
  paddingY="2"
+ paddingX={{ base: '1', md: '10' }}
+ justifyContent="space-between"
  >
- <HStack width="50%" color="white" justifyContent="flex-start" gap="10" marginLeft="10">
- <Link to={{ pathname: '/domains' }}>
- <Flex alignItems="center">
- <TriangleUpIcon marginRight="2" />
- <Text>Domains</Text>
- </Flex>
- </Link>
+ <Hide below="md">
+ <HStack color="white" justifyContent="flex-start">
+ <Link to={{ pathname: '/domains' }}>
+ <Flex alignItems="center">
+ <TriangleUpIcon marginRight="2" />
+ <Text>Domains</Text>
+ </Flex>
+ </Link>
 
- <Link to={{ pathname: '/certificate' }}>
- <Flex alignItems="center">
- <LockIcon marginRight="2" />
- <Text>Certificate</Text>
- </Flex>
- </Link>
- </HStack>
- <Heading as="h1" size="xl" color="white">
+ <Link to={{ pathname: '/certificate' }}>
+ <Flex alignItems="center">
+ <LockIcon marginRight="2" />
+ <Text>Certificate</Text>
+ </Flex>
+ </Link>
+ </HStack>
+ </Hide>
+ <Show below="md">
+ <Menu>
+ <MenuButton
+ as={Button}
+ rightIcon={<HamburgerIcon />}
+ size="auto"
+ style={{ backgroundColor: 'transparent' }}
+ />
+ <MenuList>
+ <MenuItem>
+ <Link to={{ pathname: '/domains' }}>
+ <Flex alignItems="center">
+ <TriangleUpIcon marginRight="2" />
+ <Text>Domains</Text>
+ </Flex>
+ </Link>
+ </MenuItem>
+ <MenuItem>
+ <Link to={{ pathname: '/certificate' }}>
+ <Flex alignItems="center">
+ <LockIcon marginRight="2" />
+ <Text>Certificate</Text>
+ </Flex>
+ </Link>
+ </MenuItem>
+ </MenuList>
+ </Menu>
+ </Show>
+
+ <Heading as="h1" size={{ base: 'md', sm: 'xl' }} color="white">
  My.Custom.Domain
  </Heading>
- <Flex
- width="50%"
- justifyContent="flex-end"
- alignItems="center"
- color="white"
- gap="5"
- marginRight="10"
- >
- <Text>{user.username}</Text>
+ <Flex justifyContent="flex-end" alignItems="center" color="white" gap="5">
+ <Hide below="md">
+ <Text>{user.username}</Text>
+ </Hide>
+
  <Menu>
  <MenuButton
  as={IconButton}