Feat/adjust header to mobile (#185)

* feat: create header components for mobile and desktop view

src/app/components/account/account.tsx

@@ -1,6 +1,6 @@
 import { useDispatch } from 'react-redux';
 
-import { Button, HStack } from '@chakra-ui/react';
+import { Button, HStack, useBreakpointValue } from '@chakra-ui/react';
 import { AccountMenu } from '@components/account/components/account-menu';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
 import { modalActions } from '@store/slices/modal/modal.actions';
@@ -11,6 +11,7 @@ export function Account(): React.JSX.Element {
 
   const { address, connector, isConnected } = useAccount();
   const { disconnect } = useDisconnect();
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   function onConnectWalletClick(): void {
     dispatch(modalActions.toggleSelectWalletModalVisibility());
@@ -22,15 +23,21 @@ export function Account(): React.JSX.Element {
   }
 
   return (
-    <HStack w={'275px'}>
+    <HStack h={isMobile ? '40px' : '50px'}>
       {isConnected ? (
         <AccountMenu
           address={address}
           wagmiConnector={connector}
           handleDisconnectWallet={() => onDisconnectWalletClick()}
         />
       ) : (
-        <Button variant={'account'} onClick={() => onConnectWalletClick()}>
+        <Button
+          variant={'account'}
+          onClick={() => onConnectWalletClick()}
+          h={isMobile ? '40px' : '50px'}
+          w={isMobile ? '150px' : '275px'}
+          fontSize={isMobile ? 'md' : 'lg'}
+        >
           Connect Wallet
         </Button>
       )}

src/app/components/account/components/account-menu.tsx

@@ -1,5 +1,14 @@
 import { ChevronDownIcon } from '@chakra-ui/icons';
-import { HStack, Image, Menu, MenuButton, MenuItem, MenuList, Text } from '@chakra-ui/react';
+import {
+  HStack,
+  Image,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+  useBreakpointValue,
+} from '@chakra-ui/react';
 import { truncateAddress } from 'dlc-btc-lib/utilities';
 import { Connector } from 'wagmi';
 
@@ -14,23 +23,31 @@ export function AccountMenu({
   wagmiConnector,
   handleDisconnectWallet,
 }: AccountMenuProps): React.JSX.Element | false {
+  const isMobile = useBreakpointValue({ base: true, md: false });
+
   if (!address || !wagmiConnector) return false;
   return (
     <Menu variant={'account'}>
-      <MenuButton>
+      <MenuButton h={isMobile ? '40px' : '50px'} w={isMobile ? '120px' : '275px'}>
         <HStack justifyContent={'space-evenly'}>
-          <Image
-            p={'2.5px'}
-            src={
-              wagmiConnector.name === 'WalletConnect'
-                ? './images/logos/walletconnect.svg'
-                : wagmiConnector.icon
-            }
-            alt={wagmiConnector.name}
-            boxSize={'35px'}
-          />
-          <Text>{truncateAddress(address)}</Text>
-          <ChevronDownIcon boxSize={'35px'} color={'white'} />
+          {!isMobile ? (
+            <>
+              <Image
+                p={'2.5px'}
+                src={
+                  wagmiConnector.name === 'WalletConnect'
+                    ? './images/logos/walletconnect.svg'
+                    : wagmiConnector.icon
+                }
+                alt={wagmiConnector.name}
+                boxSize={'35px'}
+              />
+              <Text>{truncateAddress(address)}</Text>
+              <ChevronDownIcon boxSize={'35px'} color={'white'} />
+            </>
+          ) : (
+            <Text>{truncateAddress(address)}</Text>
+          )}
         </HStack>
       </MenuButton>
       <MenuList>

src/app/components/company-website-button/company-website-button.tsx

@@ -1,16 +1,17 @@
 import { useNavigate } from 'react-router-dom';
 
-import { Button, Image } from '@chakra-ui/react';
+import { Button, Image, useBreakpointValue } from '@chakra-ui/react';
 
 export function CompanyWebsiteButton(): React.JSX.Element {
   const navigate = useNavigate();
 
-  const logoPath = './images/logos/dlc-link-logo.svg';
-  const altText = 'DLC.Link Logo';
+  const logoPath = './images/logos/dlc-btc-logo.svg';
+  const altText = 'dlcBTC Logo';
+  const isMobile = useBreakpointValue({ base: true, md: false });
 
   return (
-    <Button onClick={() => navigate('/')} variant={'company'} boxSize={'65px'}>
-      <Image src={logoPath} alt={altText} boxSize={'65px'} />
+    <Button onClick={() => navigate('/')} variant={'company'} boxSize={isMobile ? '54px' : '65px'}>
+      <Image src={logoPath} alt={altText} width={isMobile ? '54px' : '65px'} />
     </Button>
   );
 }

src/app/components/header/components/desktop-header.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { HStack } from '@chakra-ui/react';
+import { Account } from '@components/account/account';
+import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
+import { NetworkBox } from '@components/network/network';
+
+import { HeaderLayout } from './header.layout';
+import { NavigationTabs } from './tabs';
+
+interface DesktopHeaderProps {
+  isNetworkMenuOpen: boolean;
+  setIsNetworkMenuOpen: (isOpen: boolean) => void;
+  handleTabClick: (route: string) => void;
+}
+
+const DesktopHeader: React.FC<DesktopHeaderProps> = ({
+  isNetworkMenuOpen,
+  setIsNetworkMenuOpen,
+  handleTabClick,
+}) => {
+  return (
+    <HeaderLayout>
+      <HStack justifyContent={'flex-start'} w={'100%'} gap={'50px'}>
+        <CompanyWebsiteButton />
+        <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
+      </HStack>
+      <HStack>
+        <>
+          <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+          <Account />
+        </>
+      </HStack>
+    </HeaderLayout>
+  );
+};
+
+export default DesktopHeader;

src/app/components/header/components/mobile-header.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { HamburgerIcon } from '@chakra-ui/icons';
+import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { Account } from '@components/account/account';
+import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
+import { NetworkBox } from '@components/network/network';
+
+import { HeaderLayout } from './header.layout';
+
+interface MobileHeaderProps {
+  isNetworkMenuOpen: boolean;
+  setIsNetworkMenuOpen: (isOpen: boolean) => void;
+}
+
+const MobileHeader: React.FC<MobileHeaderProps> = ({ isNetworkMenuOpen, setIsNetworkMenuOpen }) => {
+  const navigate = useNavigate();
+  return (
+    <HeaderLayout>
+      <HStack justifyContent={'space-between'} w={'100%'} gap={'0px'}>
+        <CompanyWebsiteButton />
+        <HStack>
+          <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
+          <Account />
+          <Menu>
+            <MenuButton
+              as={IconButton}
+              aria-label={'Options'}
+              icon={<HamburgerIcon />}
+              justifyContent={'center'}
+              p={'3px'}
+              h={'40px'}
+              w={'40px'}
+              bg={'background.content.01'}
+              border={'1.5px solid'}
+              borderColor={'border.white.01'}
+              borderRadius={'md'}
+              color={'white'}
+              fontSize={'sm'}
+              fontWeight={600}
+            />
+            <MenuList
+              p={'5px'}
+              w={'200px'}
+              bgColor={'background.container.01'}
+              border={'1.5px solid'}
+              borderColor={'border.white.01'}
+              borderRadius={'md'}
+            >
+              <MenuItem
+                justifyContent={'center'}
+                bgColor={'inherit'}
+                borderRadius={'md'}
+                color={'white'}
+                fontSize={'xs'}
+                fontWeight={400}
+                transition={'all 0.05s ease-in-out'}
+                onClick={() => navigate('/')}
+              >
+                Points
+              </MenuItem>
+              <MenuItem
+                justifyContent={'center'}
+                bgColor={'inherit'}
+                borderRadius={'md'}
+                color={'white'}
+                fontSize={'xs'}
+                fontWeight={400}
+                transition={'all 0.05s ease-in-out'}
+                onClick={() => navigate('/proof-of-reserve')}
+              >
+                Proof of Reserve
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        </HStack>
+      </HStack>
+    </HeaderLayout>
+  );
+};
+
+export default MobileHeader;

src/app/components/header/header.tsx

@@ -1,20 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-import { HamburgerIcon } from '@chakra-ui/icons';
-import { HStack, IconButton, VStack, useBreakpointValue } from '@chakra-ui/react';
-import { Account } from '@components/account/account';
-import { CompanyWebsiteButton } from '@components/company-website-button/company-website-button';
-import { HeaderLayout } from '@components/header/components/header.layout';
-import { NetworkBox } from '@components/network/network';
+import { VStack, useBreakpointValue } from '@chakra-ui/react';
 import { useAccount } from 'wagmi';
 
 import { Banner } from './components/banner';
-import { NavigationTabs } from './components/tabs';
+import DesktopHeader from './components/desktop-header';
+import MobileHeader from './components/mobile-header';
 
 export function Header(): React.JSX.Element {
   const navigate = useNavigate();
-  const location = useLocation();
   const { chain, isConnected } = useAccount();
 
   const [showBanner, setShowBanner] = useState<boolean>(false);
@@ -45,34 +40,18 @@ export function Header(): React.JSX.Element {
           }}
         />
       )}
-      <HeaderLayout>
-        <HStack
-          justifyContent={isMobile ? 'space-between' : 'flex-start'}
-          w={'100%'}
-          gap={isMobile ? '0px' : '50px'}
-        >
-          <CompanyWebsiteButton />
-          {isMobile ? (
-            <IconButton
-              aria-label="menu"
-              icon={<HamburgerIcon />}
-              onClick={() => {
-                console.log('clicked');
-              }}
-            />
-          ) : (
-            <NavigationTabs activeTab={location.pathname} handleTabClick={handleTabClick} />
-          )}
-        </HStack>
-        <HStack>
-          {!isMobile && (
-            <>
-              <NetworkBox isMenuOpen={isNetworkMenuOpen} setIsMenuOpen={setIsNetworkMenuOpen} />
-              <Account />
-            </>
-          )}
-        </HStack>
-      </HeaderLayout>
+      {isMobile ? (
+        <MobileHeader
+          isNetworkMenuOpen={isNetworkMenuOpen}
+          setIsNetworkMenuOpen={setIsNetworkMenuOpen}
+        />
+      ) : (
+        <DesktopHeader
+          isNetworkMenuOpen={isNetworkMenuOpen}
+          setIsNetworkMenuOpen={setIsNetworkMenuOpen}
+          handleTabClick={handleTabClick}
+        />
+      )}
     </VStack>
   );
 }