search bar transition and minor fixes

ui/blocks/header/Burger.tsx

@@ -34,6 +34,7 @@ const Burger = () => {
         isOpen={ isOpen }
         placement="left"
         onClose={ onClose }
+        autoFocus={ false }
       >
         <DrawerOverlay/>
         <DrawerContent maxWidth="260px">

ui/blocks/header/Header.tsx

-import { HStack, VStack, Flex, useColorModeValue } from '@chakra-ui/react';
+import { HStack, Box, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -15,27 +15,26 @@ const Header = () => {
 
   if (isMobile) {
     return (
-      <VStack
-        as="header"
-        position="fixed"
-        top={ 0 }
-        left={ 0 }
-        paddingX={ 4 }
-        paddingY={ 2 }
-        bgColor={ bgColor }
-        width="100%"
-      >
+      <Box bgColor={ bgColor }>
         <Flex
+          as="header"
+          position="fixed"
+          top={ 0 }
+          left={ 0 }
+          paddingX={ 4 }
+          paddingY={ 2 }
+          bgColor={ bgColor }
           width="100%"
           alignItems="center"
           justifyContent="space-between"
+          zIndex={ 10 }
         >
           <Burger/>
           <NetworkLogo/>
           <ProfileMenu/>
         </Flex>
         <SearchBar/>
-      </VStack>
+      </Box>
     );
   }
 

ui/blocks/navigation/NavigationMobile.tsx

@@ -12,7 +12,7 @@ const NavigationMobile = () => {
 
   return (
     <>
-      <Box as="nav" mt={ 8 }>
+      <Box as="nav" mt={ 6 }>
         <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
           { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ router.asPath === item.pathname }/>) }
         </VStack>

ui/blocks/searchBar/SearchBarMobile.tsx

 import { SearchIcon } from '@chakra-ui/icons';
-import { InputGroup, Input, InputLeftElement, useColorModeValue } from '@chakra-ui/react';
+import { InputGroup, Input, InputLeftElement, useColorModeValue, chakra } from '@chakra-ui/react';
 import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
@@ -20,6 +20,7 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
 
   const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
   const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
+  const bgColor = useColorModeValue('white', 'black');
 
   const handleScroll = React.useCallback(() => {
     const currentScrollPosition = window.pageYOffset;
@@ -44,12 +45,21 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (!isVisible) {
-    return null;
-  }
-
   return (
-    <form noValidate onSubmit={ onSubmit }>
+    <chakra.form
+      noValidate
+      onSubmit={ onSubmit }
+      paddingX={ 4 }
+      paddingTop={ 1 }
+      paddingBottom={ 2 }
+      position="fixed"
+      top="56px"
+      left="0"
+      bgColor={ bgColor }
+      transform={ isVisible ? 'translateY(0)' : 'translateY(-100%)' }
+      transitionProperty="transform"
+      transitionDuration="slow"
+    >
       <InputGroup size="sm">
         <InputLeftElement >
           <SearchIcon w={ 4 } h={ 4 } color={ searchIconColor }/>
@@ -62,7 +72,7 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
           borderColor={ inputBorderColor }
         />
       </InputGroup>
-    </form>
+    </chakra.form>
   );
 };
 

ui/shared/Page/Page.tsx

@@ -33,13 +33,14 @@ const Page = ({ children }: Props) => {
       alignItems="stretch"
     >
       { !isMobile && <NavigationDesktop/> }
-      <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? '104px' : 9 } paddingBottom={ 10 }>
+      <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? 0 : 9 } paddingBottom={ 10 } spacing={ 0 }>
         <Header/>
         <Box
           as="main"
           borderRadius="base"
           w="100%"
           overflow="hidden"
+          paddingTop={ isMobile ? '138px' : '52px' }
         >
           { children }
         </Box>