fix header after merge

ui/shared/layout/LayoutApp.tsx

@@ -3,21 +3,23 @@ import React from 'react';
 import type { Props } from './types';
 
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
-import Header from 'ui/snippets/header/Header';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
+import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
+import HeaderMobile from 'ui/snippets/header/HeaderMobile';
 
 import * as Layout from './components';
 
 const LayoutDefault = ({ children }: Props) => {
   return (
     <Layout.Container>
+      <HeaderMobile/>
       <Layout.MainArea>
         <Layout.MainColumn
           paddingTop={{ base: '138px', lg: 6 }}
           paddingX={{ base: 4, lg: 6 }}
         >
           <HeaderAlert/>
-          <Header isMarketplaceAppPage/>
+          <HeaderDesktop isMarketplaceAppPage/>
           <AppErrorBoundary>
             <Layout.Content pt={{ base: 0, lg: 6 }}>
               { children }

ui/snippets/header/Header.tsx

-import { HStack, Box, Flex, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import config from 'configs/app';
-import { useScrollDirection } from 'lib/contexts/scrollDirection';
-import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
-import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
-import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
-import SearchBar from 'ui/snippets/searchBar/SearchBar';
-import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
-import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
-
-import Burger from './Burger';
-
-type Props = {
-  isHomePage?: boolean;
-  isMarketplaceAppPage?: boolean;
-  renderSearchBar?: () => React.ReactNode;
-}
-
-const Header = ({ isHomePage, isMarketplaceAppPage, renderSearchBar }: Props) => {
-  const bgColor = useColorModeValue('white', 'black');
-  const scrollDirection = useScrollDirection();
-
-  const searchBar = renderSearchBar ? renderSearchBar() : <SearchBar/>;
-
-  return (
-    <>
-      <Box bgColor={ bgColor } display={{ base: 'block', lg: 'none' }}>
-        <Flex
-          as="header"
-          position="fixed"
-          top={ 0 }
-          left={ 0 }
-          paddingX={ 4 }
-          paddingY={ 2 }
-          bgColor={ bgColor }
-          width="100%"
-          alignItems="center"
-          justifyContent="space-between"
-          zIndex="sticky2"
-          transitionProperty="box-shadow"
-          transitionDuration="slow"
-          boxShadow={ scrollDirection === 'down' ? 'md' : 'none' }
-        >
-          <Burger/>
-          <NetworkLogo/>
-          <Flex columnGap={ 2 }>
-            { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
-            { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
-          </Flex>
-        </Flex>
-        { !isHomePage && searchBar }
-      </Box>
-      <Box display={{ base: 'none', lg: 'block' }}>
-        { !isHomePage && (
-          <HStack
-            as="header"
-            width="100%"
-            alignItems="center"
-            justifyContent="center"
-            gap={ 12 }
-          >
-            { isMarketplaceAppPage && (
-              <Box display="flex" alignItems="center" gap={ 3 }>
-                <Burger isMarketplaceAppPage/>
-                <NetworkLogo isCollapsed/>
-              </Box>
-            ) }
-            <Box width="100%">
-              { searchBar }
-            </Box>
-            <Box display="flex">
-              { config.features.account.isEnabled && <ProfileMenuDesktop/> }
-              { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
-            </Box>
-          </HStack>
-        ) }
-      </Box>
-    </>
-  );
-};
-
-export default Header;

ui/snippets/header/HeaderDesktop.tsx

@@ -2,14 +2,19 @@ import { HStack, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
+
+import Burger from './Burger';
 
 type Props = {
   renderSearchBar?: () => React.ReactNode;
+  isMarketplaceAppPage?: boolean;
 }
 
-const HeaderDesktop = ({ renderSearchBar }: Props) => {
+const HeaderDesktop = ({ renderSearchBar, isMarketplaceAppPage }: Props) => {
 
   const searchBar = renderSearchBar ? renderSearchBar() : <SearchBar/>;
 
@@ -22,10 +27,19 @@ const HeaderDesktop = ({ renderSearchBar }: Props) => {
       justifyContent="center"
       gap={ 12 }
     >
+      { isMarketplaceAppPage && (
+        <Box display="flex" alignItems="center" gap={ 3 }>
+          <Burger isMarketplaceAppPage/>
+          <NetworkLogo isCollapsed/>
+        </Box>
+      ) }
       <Box width="100%">
         { searchBar }
       </Box>
+      <Box display="flex">
         { config.features.account.isEnabled && <ProfileMenuDesktop/> }
+        { config.features.blockchainInteraction.isEnabled && <WalletMenuDesktop/> }
+      </Box>
     </HStack>
   );
 };

ui/snippets/header/HeaderMobile.tsx

@@ -7,6 +7,7 @@ import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
 import SearchBar from 'ui/snippets/searchBar/SearchBar';
+import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
 
 import Burger from './Burger';
 
@@ -47,7 +48,10 @@ const HeaderMobile = ({ isHomePage, renderSearchBar }: Props) => {
       >
         <Burger/>
         <NetworkLogo/>
+        <Flex columnGap={ 2 }>
           { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
+          { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
+        </Flex>
       </Flex>
       { !isHomePage && searchBar }
     </Box>