another variant of sticky headers

lib/hooks/useScrollVisibility.ts → lib/hooks/useScrollDirection.ts

@@ -6,20 +6,22 @@ import isBrowser from 'lib/isBrowser';
 
 const SCROLL_DIFF_THRESHOLD = 20;
 
-export default function useScrollVisibility(direction: 'up' | 'down') {
+type Directions = 'up' | 'down';
+
+export default function useScrollDirection() {
   const prevScrollPosition = React.useRef(isBrowser() ? window.pageYOffset : 0);
-  const [ isVisible, setVisibility ] = React.useState(true);
+  const [ scrollDirection, setDirection ] = React.useState<Directions>();
 
   const handleScroll = React.useCallback(() => {
     const currentScrollPosition = clamp(window.pageYOffset, 0, window.document.body.scrollHeight - window.innerHeight);
     const scrollDiff = currentScrollPosition - prevScrollPosition.current;
 
     if (Math.abs(scrollDiff) > SCROLL_DIFF_THRESHOLD) {
-      setVisibility(direction === 'up' ? scrollDiff < 0 : scrollDiff > 0);
+      setDirection(scrollDiff < 0 ? 'up' : 'down');
     }
 
     prevScrollPosition.current = currentScrollPosition;
-  }, [ direction ]);
+  }, [ ]);
 
   React.useEffect(() => {
     const throttledHandleScroll = throttle(handleScroll, 300);
@@ -33,5 +35,5 @@ export default function useScrollVisibility(direction: 'up' | 'down') {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return isVisible;
+  return scrollDirection;
 }

ui/pages/Transactions.tsx

@@ -19,7 +19,7 @@ const Transactions = () => {
   ];
 
   return (
-    <Page>
+    <Page hideMobileHeaderOnScrollDown>
       <Box h="100%">
         <PageTitle text="Transactions"/>
         <RoutedTabs tabs={ TABS }/>

ui/shared/Page/Page.tsx

@@ -13,9 +13,10 @@ import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
 interface Props {
   children: React.ReactNode;
   wrapChildren?: boolean;
+  hideMobileHeaderOnScrollDown?: boolean;
 }
 
-const Page = ({ children, wrapChildren = true }: Props) => {
+const Page = ({ children, wrapChildren = true, hideMobileHeaderOnScrollDown }: Props) => {
   const fetch = useFetch();
 
   useQuery<unknown, unknown, unknown>([ QueryKeys.csrf ], async() => await fetch('/node-api/account/csrf'), {
@@ -30,7 +31,7 @@ const Page = ({ children, wrapChildren = true }: Props) => {
     <Flex w="100%" minH="100vh" alignItems="stretch">
       <NavigationDesktop/>
       <Flex flexDir="column" width="100%">
-        <Header/>
+        <Header hideOnScrollDown={ hideMobileHeaderOnScrollDown }/>
         { renderedChildren }
       </Flex>
     </Flex>

ui/snippets/header/Header.tsx

 import { HStack, Box, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import useScrollDirection from 'lib/hooks/useScrollDirection';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
@@ -9,8 +10,11 @@ import SearchBar from 'ui/snippets/searchBar/SearchBar';
 import Burger from './Burger';
 import ColorModeToggler from './ColorModeToggler';
 
-const Header = () => {
+const Header = ({ hideOnScrollDown }: {hideOnScrollDown?: boolean}) => {
+  const scrollDirection = useScrollDirection();
   const bgColor = useColorModeValue('white', 'black');
+
+  const transform = hideOnScrollDown && scrollDirection === 'down' ? 'translateY(-100%)' : 'translateY(0)';
   return (
     <>
       <Box bgColor={ bgColor } display={{ base: 'block', lg: 'none' }}>
@@ -26,6 +30,9 @@ const Header = () => {
           alignItems="center"
           justifyContent="space-between"
           zIndex="sticky"
+          transform={ transform }
+          transitionProperty="transform"
+          transitionDuration="slow"
         >
           <Burger/>
           <NetworkLogo/>

ui/snippets/searchBar/SearchBarMobile.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
 
 import searchIcon from 'icons/search.svg';
-import useScrollVisibility from 'lib/hooks/useScrollVisibility';
+import useScrollDirection from 'lib/hooks/useScrollDirection';
 
 interface Props {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -12,7 +12,7 @@ interface Props {
 
 const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
 
-  const isVisible = useScrollVisibility('up');
+  const isVisible = useScrollDirection() === 'up';
 
   const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
   const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
@@ -30,9 +30,9 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
       left="0"
       zIndex="docked"
       bgColor={ bgColor }
-      transform={ isVisible ? 'translateY(0)' : 'translateY(-100%)' }
-      // transitionProperty="transform"
-      // transitionDuration="slow"
+      transform={ isVisible ? 'translateY(0)' : 'translateY(-108px)' }
+      transitionProperty="transform"
+      transitionDuration="slow"
       display={{ base: 'block', lg: 'none' }}
       w="100%"
     >

ui/txs/TxsHeader.tsx

-import { HStack, Flex } from '@chakra-ui/react';
+import { HStack, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 // import FilterInput from 'ui/shared/FilterInput';
-import useScrollVisibility from 'lib/hooks/useScrollVisibility';
+import useScrollDirection from 'lib/hooks/useScrollDirection';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import SortButton from 'ui/shared/SortButton';
@@ -18,21 +18,22 @@ type Props = {
 }
 
 const TxsHeader = ({ sorting, paginationProps }: Props) => {
-  const isVisible = useScrollVisibility('down');
+  const scrollDirection = useScrollDirection();
 
   const isMobile = useIsMobile(false);
   return (
     <Flex
-      backgroundColor="white"
+      backgroundColor={ useColorModeValue('white', 'black') }
       mt={ -6 }
       pt={ 6 }
       pb={ 6 }
       justifyContent="space-between"
       width="100%"
       position="sticky"
-      top={{ base: isVisible ? '56px' : '108px', lg: 0 }}
-      // transitionDuration="slow"
-      // transitionProperty="top"
+      top="108px"
+      transform={ scrollDirection === 'up' ? 'translateY(0)' : 'translateY(-108px)' }
+      transitionProperty="transform"
+      transitionDuration="slow"
       zIndex={{ base: 0, lg: 'docked' }}
     >
       <HStack>