From 1dcceccc2a9b5d67ec8bb20f97ac17a5e7f44834 Mon Sep 17 00:00:00 2001
From: Ririio <xRiriio@gmail.com>
Date: Tue, 14 Feb 2023 10:56:34 -0500
Subject: [PATCH] making header responsinve

---
 app/components/header.tsx | 84 +++++++++++++++++++++++++++------------
 1 file changed, 59 insertions(+), 25 deletions(-)

diff --git a/app/components/header.tsx b/app/components/header.tsx
index 7a3c1638..50803fa6 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -9,8 +9,11 @@ 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';
@@ -18,43 +21,74 @@ 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}