shadows

theme/foundations/zIndices.ts

+const zIndices = {
+  hide: -1,
+  auto: 'auto',
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  sticky1: 1101,
+  sticky2: 1102,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800,
+};
+
+export default zIndices;

theme/index.ts

@@ -7,6 +7,7 @@ import breakpoints from './foundations/breakpoints';
 import colors from './foundations/colors';
 import transition from './foundations/transition';
 import typography from './foundations/typography';
+import zIndices from './foundations/zIndices';
 import global from './global';
 
 const overrides = {
@@ -20,6 +21,7 @@ const overrides = {
   },
   breakpoints,
   transition,
+  zIndices,
 };
 
 export default extendTheme(overrides);

ui/snippets/header/Header.tsx

@@ -14,7 +14,7 @@ const Header = ({ hideOnScrollDown }: {hideOnScrollDown?: boolean}) => {
   const scrollDirection = useScrollDirection();
   const bgColor = useColorModeValue('white', 'black');
 
-  const transform = hideOnScrollDown && scrollDirection === 'down' ? 'translateY(-100%)' : 'translateY(0)';
+  const transform = hideOnScrollDown && scrollDirection === 'down' ? 'translateY(-60px)' : 'translateY(0)';
   return (
     <>
       <Box bgColor={ bgColor } display={{ base: 'block', lg: 'none' }}>
@@ -29,10 +29,11 @@ const Header = ({ hideOnScrollDown }: {hideOnScrollDown?: boolean}) => {
           width="100%"
           alignItems="center"
           justifyContent="space-between"
-          zIndex="sticky"
+          zIndex="sticky2"
           transform={ transform }
-          transitionProperty="transform"
+          transitionProperty="transform,box-shadow"
           transitionDuration="slow"
+          boxShadow={ scrollDirection === 'down' ? 'md' : 'none' }
         >
           <Burger/>
           <NetworkLogo/>

ui/snippets/searchBar/SearchBarMobile.tsx

 import { InputGroup, Input, InputLeftElement, Icon, useColorModeValue, chakra } from '@chakra-ui/react';
+import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
 
 import searchIcon from 'icons/search.svg';
 import useScrollDirection from 'lib/hooks/useScrollDirection';
 
+const TOP = 55;
+
 interface Props {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
@@ -12,7 +15,30 @@ interface Props {
 
 const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
 
-  const isVisible = useScrollDirection() === 'up';
+  const scrollDirection = useScrollDirection();
+  const isVisible = !scrollDirection || scrollDirection === 'up';
+
+  const [ isSticky, setIsSticky ] = React.useState(false);
+
+  const handleScroll = React.useCallback(() => {
+    if (window.pageYOffset === 0 || !isVisible) {
+      setIsSticky(false);
+    } else {
+      setIsSticky(true);
+    }
+  }, [ isVisible ]);
+
+  React.useEffect(() => {
+    const throttledHandleScroll = throttle(handleScroll, 300);
+
+    window.addEventListener('scroll', throttledHandleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandleScroll);
+    };
+  // replicate componentDidMount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
   const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
@@ -26,15 +52,16 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
       paddingTop={ 1 }
       paddingBottom={ 2 }
       position="fixed"
-      top="56px"
+      top={ `${ TOP }px` }
       left="0"
-      zIndex="docked"
+      zIndex="sticky1"
       bgColor={ bgColor }
-      transform={ isVisible ? 'translateY(0)' : 'translateY(-108px)' }
-      transitionProperty="transform"
+      transform={ isVisible ? 'translateY(0)' : 'translateY(-112px)' }
+      transitionProperty="transform,box-shadow"
       transitionDuration="slow"
       display={{ base: 'block', lg: 'none' }}
       w="100%"
+      boxShadow={ isVisible && isSticky ? 'md' : 'none' }
     >
       <InputGroup size="sm">
         <InputLeftElement >

ui/txs/TxsHeader.tsx

 import { HStack, Flex, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
+import throttle from 'lodash/throttle';
+import React, { useCallback } from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
 
@@ -17,24 +18,54 @@ type Props = {
   paginationProps: PaginationProps;
 }
 
+const TOP_UP = 106;
+const TOP_DOWN = 0;
+
 const TxsHeader = ({ sorting, paginationProps }: Props) => {
   const scrollDirection = useScrollDirection();
+  const [ isSticky, setIsSticky ] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
 
   const isMobile = useIsMobile(false);
+
+  const handleScroll = useCallback(() => {
+    if (
+      Number(ref.current?.getBoundingClientRect().y) <= TOP_DOWN ||
+      (scrollDirection === 'up' && Number(ref.current?.getBoundingClientRect().y) <= TOP_UP)
+    ) {
+      setIsSticky(true);
+    } else {
+      setIsSticky(false);
+    }
+  }, [ scrollDirection ]);
+
+  React.useEffect(() => {
+    const throttledHandleScroll = throttle(handleScroll, 300);
+
+    window.addEventListener('scroll', throttledHandleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandleScroll);
+    };
+  }, [ handleScroll ]);
+
   return (
     <Flex
       backgroundColor={ useColorModeValue('white', 'black') }
       mt={ -6 }
       pt={ 6 }
       pb={ 6 }
+      mx={{ base: -4, lg: 0 }}
+      px={{ base: 4, lg: 0 }}
       justifyContent="space-between"
-      width="100%"
+      width={{ base: '100vw', lg: 'unset' }}
       position="sticky"
-      top="108px"
-      transform={ scrollDirection === 'up' ? 'translateY(0)' : 'translateY(-108px)' }
-      transitionProperty="transform"
+      top={{ base: scrollDirection === 'down' ? `${ TOP_DOWN }px` : `${ TOP_UP }px`, lg: 0 }}
+      transitionProperty="top"
       transitionDuration="slow"
-      zIndex={{ base: 0, lg: 'docked' }}
+      zIndex={{ base: 'sticky2', lg: 'docked' }}
+      boxShadow={{ base: isSticky ? 'md' : 'none', lg: 'none' }}
+      ref={ ref }
     >
       <HStack>
         { /* api is not implemented */ }